Adding/fixing a lot. Messing with models/lighting/ideas

package.json

@@ -33,7 +33,6 @@
     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.23",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-middleware": "^5.3.1",
@@ -44,9 +43,12 @@
   "dependencies": {
     "@react-three/drei": "^8.16.5",
     "@react-three/fiber": "^7.0.26",
+    "file-loader": "^6.2.0",
     "gsap": "^3.9.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "three": "^0.138.3"
+    "tailwindcss": "^3.0.23",
+    "three": "^0.138.3",
+    "url-loader": "^4.1.1"
   }
 }

src/assets/models/desk_asset/license.txt

@@ -0,0 +1,11 @@
+Model Information:
+* title:	Desk Asset
+* source:	https://sketchfab.com/3d-models/desk-asset-ca972bf129344a73a3fe59a0eef78164
+* author:	Ankledot (https://sketchfab.com/Ankledot)
+
+Model License:
+* license type:	CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
+* requirements:	Author must be credited. Commercial use is allowed.
+
+If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
+This work is based on "Desk Asset" (https://sketchfab.com/3d-models/desk-asset-ca972bf129344a73a3fe59a0eef78164) by Ankledot (https://sketchfab.com/Ankledot) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)

src/components/App.jsx

@@ -1,16 +1,34 @@
 import '../styles/styles.scss';
 import * as THREE from 'three';
-import { useRef, useState , forwardRef} from 'react';
+import { useRef, useState } from 'react';
 import { useFrame, useThree } from '@react-three/fiber';
-import { Text, Environment, MeshReflectorMaterial, useTexture, Html, Image, Scroll, useScroll, ScrollControls } from '@react-three/drei';
+import { 
+  Text, 
+  MeshReflectorMaterial, 
+  useTexture, 
+  Html, 
+  Image, 
+  Scroll, 
+  useScroll, 
+  ScrollControls, 
+  useGLTF,
+  useHelper,
+  OrbitControls
+ } from '@react-three/drei';
 import { gsap } from 'gsap';
 
-import floorTexture from '../assets/textures/texture1.jpg';
+// import floorTexture from '../assets/textures/texture1.jpg';
-import floorTextureNormal from '../assets/textures/texture1_normal.jpg';
+// import floorTextureNormal from '../assets/textures/texture1_normal.jpg';
 import font from '../assets/fonts/Inter-Bold.woff';
+// import deskScene from '../assets/models/desk_asset/scene.gltf';
+import toyCar from '../assets/models/ToyCar.glb';
+import m1 from '../assets/models/mbp-v1-pipe.glb';
+import { SpotLightHelper } from 'three';
+
+const rsqw = (t, delta = 0.1, a = 1, f = 1 / (2 * Math.PI)) => (a / Math.atan(1 / delta)) * Math.atan(Math.sin(2 * Math.PI * t * f) / delta)
 
 const Floor = () => {
-  const [floor, normal] = useTexture([floorTexture, floorTextureNormal]);
+  // const [floor, normal] = useTexture([floorTexture, floorTextureNormal]);
   return (
     <mesh rotation={[-Math.PI / 2, 0, 0]}>
       <planeGeometry attach='geometry' args={[15, 7]} />
@@ -31,11 +49,10 @@ const Floor = () => {
   );
 };
 
-const Dog = forwardRef((props, ref) => {
+const Dog = ({position, scale}) => {
-  // const ref = useRef();
+  const ref = useRef();
 
   const scroll = useScroll();
-
   const [hovered, setHovered] = useState(false);
   const [rnd] = useState(() => Math.random());
 
@@ -47,8 +64,8 @@ const Dog = forwardRef((props, ref) => {
     //   ref.current.position.y = scroll.offset * 10;
     // console.log( props );
     // }
-    // ref.current.scale.x = THREE.MathUtils.damp(ref.current.scale.x, hovered ? 0.75 : ref.current.scale[0], 6, delta);
+    ref.current.scale.x = THREE.MathUtils.damp(ref.current.scale.x, hovered ? 0.75 : scale[0], 6, delta);
-    // ref.current.scale.y = THREE.MathUtils.damp(ref.current.scale.y, hovered ? ref.current.scale[1] + 0.1 : ref.current.scale[1], 8, delta);
+    ref.current.scale.y = THREE.MathUtils.damp(ref.current.scale.y, hovered ? scale[1] + 0.1 : scale[1], 8, delta);
     ref.current.material.grayscale = THREE.MathUtils.damp(ref.current.material.grayscale, hovered ? 0 : 1, 6, delta);
     ref.current.material.zoom = 1.5 + Math.sin(rnd * 10000 + state.clock.elapsedTime / 3) / 2;
     ref.current.material.color.lerp(new THREE.Color().set(hovered ? 'white' : '#aaa'), hovered ? 0.3 : 0.1)
@@ -56,47 +73,74 @@ const Dog = forwardRef((props, ref) => {
     // console.log( ref.current.position.x );
   });
   return (
-      <Image {...props} ref={ref} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} url="https://picsum.photos/id/237/1920/1024" position={props.position} rotation={[0, 0, 0]} scale={props.scale}/>
+      <Image ref={ref} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} url="https://picsum.photos/id/237/1920/1024" position={position} rotation={[0, 0, 0]} scale={scale}/>
   );
-});
+};
 
 const App = () => {
+  const imageGroupRef = useRef();
   const sectionOneRef = useRef();
   const sectionTwoRef = useRef();
-  const image1Ref = useRef();
+  const spotlightRef = useRef();
-  const image2Ref = useRef();
+  useHelper(spotlightRef, SpotLightHelper, 1);
-  const image3Ref = useRef();
+  const mbp16 = useRef();
   const xW = 0.7 + 0.15;
   const [rnd] = useState( () => Math.random() );
   const scroll = useScroll();
+  // const toyCar = useGLTF(toyCar);
+  const { nodes, materials } = useGLTF(m1);
 
   useFrame((state, delta) => {
+    const r1 = scroll.range(0 / 4, 1 / 4);
+    const r2 = scroll.range(1 / 4, 1 / 4);
     sectionOneRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6;
     sectionTwoRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6;
-    if( scroll.range(1 / 3, 2 / 3) ) {
+    imageGroupRef.current.position.y = scroll.offset * 10;
-      gsap.to( image1Ref.current.position, {y: 5} );
-      gsap.to( image2Ref.current.position, {y: 5} );
-      gsap.to( image3Ref.current.position, {y: 5} );
 
+    // mbp16.current.rotation.x = Math.PI - (Math.PI / 2) * rsqw(r1) + r2 * 0.33;
+
+    if( scroll.range(1 / 3, 2 / 3) ) {
       gsap.to( sectionOneRef.current.position, {x: -5} );
     } else {
       gsap.to( sectionOneRef.current.position, {x: -1.85} );
-      gsap.to( image1Ref.current.position, {y: -0.1} );
-      gsap.to( image2Ref.current.position, {y: -0.1} );
-      gsap.to( image3Ref.current.position, {y: -0.1} );
       
     }
 
     if( scroll.range(1 / 3, 2 / 3) ) {
+      console.log( sectionOneRef.current );
+      gsap.to( sectionOneRef.current, { fillOpacity: 0 });
       gsap.to( sectionTwoRef.current.position, {x: -1.85} );
+      gsap.to( sectionTwoRef.current, {fillOpacity: 1} );
     } else {
       gsap.to( sectionTwoRef.current.position, {x: -5} );
+      gsap.to( sectionOneRef.current, { fillOpacity: 1 });
+      gsap.to( sectionTwoRef.current, { fillOpacity: 0 } );
     }
   });
 
   return (
     <>
+      {/* <OrbitControls /> */}
       <color attach="background" args={["#FAF9F6"]} />
+      <fog attach="fog" args={["black", 0, 15]} />
+
+      <mesh receiveShadow position={[0, 0, -4]} rotation={[0, 0, 0]}>
+        <planeGeometry args={[20, 20]} />
+        <meshStandardMaterial attach="material" />
+      </mesh>
+
+      <mesh position={[2, 0, -3]} rotation={[0, 0, 0]}>
+        <sphereBufferGeometry receiveShadow scale={[0.1, 0.1]} />
+        <meshStandardMaterial attach="material" color={"pink"} />
+      </mesh>
+
+      <spotLight
+        shadow-mapSize-width={2048}
+        shadow-mapSize-height={2048}
+        ref={spotlightRef} position={[1, 0, -1.5]} rotation={[0, 0, 0]} intensity={10} castShadow />
+      {/* <directionalLight position={[0, 0, 0]} intensity={0.6} castShadow /> */}
+      <ambientLight position={[0, 0, -1.5]} intensity={0.5} />
+
       <group position={[0, -1, 0]}>
         <Text
           ref={sectionOneRef}
@@ -117,6 +161,7 @@ const App = () => {
           ref={sectionTwoRef}
           font={font}
           lineHeight={-0.8}
+          fillOpacity={0}
           maxWidth={3}
           fontSize={0.6}
           position={[-5, 1, -3.2]}
@@ -128,14 +173,50 @@ const App = () => {
         </Text>
       </group>
 
-          <Dog ref={image1Ref} position={[1.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
+      <group ref={imageGroupRef} position={[0, 0, 0]}>
-          <Dog ref={image2Ref} position={[2.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
+        {/* <Dog position={[1.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
-          <Dog ref={image3Ref} position={[3.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
+        <Dog position={[2.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} />
+        <Dog position={[3.5 * xW, -0.1, -2.5]} scale={[0.7, 2, 1]} /> */}
 
-          {/* <Dog ref={imageRef} position={[1.5 * xW, -1, -2.5]} scale={[0.7, 2, 1]} />
+        {/* <group rotation={[Math.PI / 2, 0, 0]} position={[1.5, -1, -3]} scale={[0.01, 0.01, 0.01]}>
-          <Dog ref={imageRef} position={[2.5 * xW, -1, -2.5]} scale={[0.7, 2, 1]} />
+              <mesh receiveShadow castShadow geometry={toyCar.nodes.ToyCar.geometry} />
-          <Dog ref={imageRef} position={[3.5 * xW, -1, -2.5]} scale={[0.7, 2, 1]} /> */}
+            </group> */}
-          <Environment preset="city" />
+
+        {/*}
+        <group
+          castShadow
+          ref={mbp16}
+          position={[1.5, -1, -3]}
+          scale={[0.08, 0.08, 0.08]}
+          dispose={null}>
+          <group position={[0, -0.43, -11.35]} rotation={[Math.PI / 2, 0, 0]}>
+            <mesh
+              geometry={nodes.back_1.geometry}
+              material={materials.blackmatte}
+            />
+            <mesh
+              receiveShadow
+              castShadow
+              geometry={nodes.back_2.geometry}
+              material={materials.aluminium}
+            />
+            <mesh geometry={nodes.matte.geometry}>
+              <meshLambertMaterial map={texture} toneMapped={false} />
+            </mesh>
+          </group>
+          <mesh
+            geometry={nodes.body_1.geometry}
+            material={materials.aluminium}
+            material-color="#aaaaaf"
+            material-envMapIntensity={0.2}
+          />
+          <mesh
+            geometry={nodes.body_2.geometry}
+            material={materials.blackmatte}
+          />
+        </group>
+        */}
+      </group>
     </>
   );
 };

src/scripts/app.js

@@ -9,12 +9,9 @@ import App from '../components/App';
 
 render(
   <>
-    <MainContent />
     <Suspense fallback={null}>
-      <Canvas mode='concurrent' gl={{ antialias: true }} dpr={[1, 1.5]} camera={{position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
+      <MainContent />
-        <spotLight position={[0, 0, 0]} intensity={10} />
+      <Canvas shadowMap mode='concurrent' gl={{ antialias: true }} dpr={[1, 1.5]} camera={{position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
-        <directionalLight color={"red"} position={[0, 0, 0]} intensity={10} />
-        <ambientLight position={[0, 0, -1]} intensity={0.5} />
         <ScrollControls damping={10} pages={10}>
           <Scroll>
             <App />

webpack.common.js

@@ -61,6 +61,25 @@ module.exports = {
         },
       },
 
+      {
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: 'assets/images'
+        },
+      },
+
+      {
+        test: /\.(gltf|glb|bin)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: 'assets/models',
+          esModule: false
+        }
+      },
+
       // CSS
       {
         test: /\.s[ac]ss$/i,
@@ -75,16 +94,9 @@ module.exports = {
 
       // Images
 
-      {
-        test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i,
-        type: 'asset/resource',
-      },
-
       // {
-      //   test: /\.(jpg|png|gif|svg)$/,
+      //   test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i,
-      //   use: {
+      //   type: 'asset/resource',
-      //     loader: 'url-loader'
-      //   }
       // },
 
       // {
@@ -103,30 +115,32 @@ module.exports = {
 
       // Fonts
 
-      {
+      // {
-        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+      //   test: /\.(woff|woff2|eot|ttf|otf)$/i,
-        type: 'asset/resource',
+      //   type: 'asset/resource',
-      },
+      // },
 
-      // {
+      {
-      //   test: /\.(ttf|eot|woff|woff2)$/,
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
-      //   use:
+        use:
-      //     [
+          [
-      //       {
+            {
-      //         loader: 'file-loader',
+              loader: 'file-loader',
-      //         options:
+              options:
-      //         {
+              {
-      //           outputPath: './assets/fonts/'
+                name: '[name].[ext]',
-      //         }
+                outputPath: 'assets/fonts'
-      //       }
+              }
-      //     ]
+            }
-      // }
+          ]
+      }
     ],
   },
   plugins: [
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, './src/views/index.html'),
+      favicon: './src/assets/logos/fd..svg',
       inject: 'body',
     }),
     new MiniCSSExtractPlugin({

webpack.dev.js

@@ -1,5 +1,4 @@
 const { merge } = require('webpack-merge');
-const webpack = require( 'webpack' );
 const commonConfiguration = require('./webpack.common.js');
 const path = require('path');
 
@@ -9,39 +8,7 @@ const hotMiddlewareScript =
 module.exports = merge(commonConfiguration, {
   mode: 'development',
   entry: {
-    portfolio: ['./src/scripts/app.js'],
+    portfolio: path.resolve(__dirname, './src/scripts/app.js'),
   },
-  devtool: 'source-map',
+  devtool: 'source-map'
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    // new ImageMinimizerPlugin({
-    //   minimizerOptions: {
-    //     // Lossless optimization with custom option
-    //     // Feel free to experiment with options for better result for you
-    //     plugins: [
-    //       ['gifsicle', { interlaced: true }],
-    //       ['jpegtran', { progressive: true }],
-    //       ['optipng', { optimizationLevel: 5 }],
-    //       // Svgo configuration here https://github.com/svg/svgo#configuration
-    //       [
-    //         'svgo',
-    //         {
-    //           plugins: [
-    //             {
-    //               name: 'removeViewBox',
-    //               active: false,
-    //             },
-    //             {
-    //               name: 'addAttributesToSVGElement',
-    //               params: {
-    //                 attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
-    //               },
-    //             },
-    //           ],
-    //         },
-    //       ],
-    //     ],
-    //   },
-    // }),
-  ]
 });