Working on making floor texture look more realistic

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "node ./server.js",
+    "start": "npx webpack serve --config webpack.dev.js",
     "build": "NODE_ENV=production webpack --config webpack.prod.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -37,6 +37,7 @@
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-middleware": "^5.3.1",
+    "webpack-dev-server": "^4.7.4",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0"
   },

server.js

@@ -13,13 +13,14 @@ const compiler = webpack(config);
 app.use(
   webpackDevMiddleware(compiler, {
     publicPath: config.output.publicPath,
-    writeToDisk: true,
+    writeToDisk: true
   })
 );
 
 app.use( webpackHotMiddleware(compiler, {
   noInfo: true,
-  quiet: true
+  quiet: true,
+  contentBase: '/dist'
 }) );
 
 app.get( '/*', function(req, res) {

src/components/App.jsx

@@ -1,76 +1,64 @@
 import '../styles/styles.scss';
 import * as THREE from 'three';
 import { useRef, useState } from 'react';
-import { Canvas, useFrame, useThree } from '@react-three/fiber';
-import { MeshReflectorMaterial, Environment, ContactShadows, Text } from '@react-three/drei';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { Text, Environment, MeshReflectorMaterial, useTexture } from '@react-three/drei';
 import { gsap } from 'gsap';
 
-const Box = (props) => {
-  // This reference gives us direct access to the THREE.Mesh object
-  const ref = useRef();
-  
-  // Hold state for hovered and clicked events
-  const [hovered, hover] = useState(false);
-  const [clicked, click] = useState(false);
+import dreiVideo from '../assets/videos/drei.mp4';
+import floorTexture from '../assets/textures/texture1.jpg';
+import floorTextureNormal from '../assets/textures/texture1_normal.jpg';
 
-  // Subscribe this component to the render-loop, rotate the mesh every frame
-  useFrame((state, delta) => {
-    gsap.to( ref.current.rotation, {
-      x: "+= 0.1"
-    });
-  });
-
-  // Return the view, these are regular Threejs elements expressed in JSX
+const Floor = () => {
+  const [floor, normal] = useTexture([floorTexture, floorTextureNormal]);
   return (
-    <mesh
-      {...props}
-      ref={ref}
-      scale={clicked ? 1.5 : 1}
-      onClick={(event) => click(!clicked)}
-      onPointerOver={(event) => hover(true)}
-      onPointerOut={(event) => hover(false)}>
-      <boxGeometry args={[1, 1, 1]} />
-      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    // <MeshReflectorMaterial blur={[400, 100]} resolution={512} args={[10, 10]} mirror={0.5} mixBlur={6} mixStrength={1.5} rotation={[0, 0, 0]} color="#a0a0a0" metalness={0.4} roughnessMap={floor} normalMap={normal} normalScale={[2, 2]} />
+    <mesh rotation={[-Math.PI / 2, 0, 0]}>
+          <planeGeometry attach='geometry' args={[20, 20]} />
+          <MeshReflectorMaterial
+            blur={[400, 100]}
+            resolution={2048}
+            mixBlur={6}
+            mirror={1}
+            mixStrength={0.2}
+            roughnessMap={floor}
+            roughness={10}
+            metalness={0.4}
+            normalMap={normal}
+            normalScale={[2, 2]}
+          />
     </mesh>
-  )
+  );
 };
 
 const App = () => {
-  const [video] = useState(() => Object.assign(document.createElement('video'), { src: '../assets/videos/drei.mp4', crossOrigin: 'Anonymous', loop: true }))
+  const [video] = useState(() => {
+    const vid = document.createElement('video');
+    vid.src = dreiVideo;
+    vid.crossOrigin = "Anonymous";
+    vid.loop = true;
+    vid.muted = true;
+    vid.play();
+    return vid;
+  });
   return (
     <>
-      <Canvas flat dpr={[1, 2]} camera={{ fov: 25, position: [-8, 0, 0] }} id="canvas-container" style={{position: 'absolute'}}>
-        <color attach="background" args={['#191920']} />
-        <fog attach="fog" args={['#191920', 0, 15]} />
-        <ambientLight intensity={0.5} />
-        <pointLight position={[10, 10, 10]} />
-        <Text font='' position={[0, 0.5, 0]} fontSize={2} letterSpacing={-0.06} rotation={[0, -Math.PI / 2, 0]}>
-          drei
-          <meshBasicMaterial toneMapped={false}>
-            <videoTexture attach="map" args={[video]} encoding={THREE.sRGBEncoding} />
-          </meshBasicMaterial>
-        </Text>
-        <group position={[0, -0.5, 0]}>
-          {/* <Box position={[-1.2, 1, 0]} />
-          <Box position={[1.2, 1, 0]} /> */}
-          <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]}>
-            <planeBufferGeometry args={[50, 50]}></planeBufferGeometry>
-            <MeshReflectorMaterial
-              blur={[300, 100]}
-              resolution={2048}
-              mixBlur={1}
-              mixStrength={40}
-              roughness={1}
-              depthScale={1.2}
-              minDepthThreshold={0.4}
-              maxDepthThreshold={1.4}
-              color="#101010"
-              metalness={0.5}
-            />
-          </mesh>
+      <Canvas concurrent gl={{ alpha: false}} pixelRatio={[1, 1.5]} camera={{ position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
+        <color attach="background" args={['black']} />
+        <fog attach="fog" args={['black', 0, 9]} />
+        <group position={[0, -1, 0]}>
+          <Text lineHeight={-0.8} maxWidth={4} fontSize={1} position={[-1, 1.5, -4]} rotation={[0, 0, 0]}>
+            Designer and Developer
+            <meshStandardMaterial>
+              <videoTexture attach="map" args={[video]}/>
+            </meshStandardMaterial>
+          </Text>
+          <Floor />
         </group>
-        <Environment preset="city" />
-        <ContactShadows frames={1}></ContactShadows>
+        <ambientLight intensity={0.5} />
+        <spotLight position={[0, 0, 0]} intensity={0.3} />
+        <directionalLight position={[0, 0, 0]} intensity={0.7} />
+        <Environment preset='city' />
       </Canvas>
     </>
   );

src/styles/styles.scss

@@ -1,4 +1,3 @@
-@tailwind preflight;
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

webpack.common.js

@@ -19,6 +19,22 @@ module.exports = {
       "querystring": require.resolve("querystring-es3")
     }
   },
+  output: {
+    filename: 'js/[name].[contenthash].js',
+    path: path.join(__dirname, 'dist'),
+    publicPath: '/',
+    clean: true
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    devMiddleware: {
+      writeToDisk: true
+    },
+    port: 3000,
+    open: true
+  },
   module: {
     rules: [
       // HTML
@@ -62,9 +78,6 @@ module.exports = {
       {
         test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i,
         type: 'asset/resource',
-        generator: {
-          filename: 'assets/[name].[ext]'
-        },
       },
 
       // {

webpack.dev.js

@@ -9,13 +9,7 @@ const hotMiddlewareScript =
 module.exports = merge(commonConfiguration, {
   mode: 'development',
   entry: {
-    portfolio: [hotMiddlewareScript, './src/scripts/app.js'],
-  },
-  output: {
-    filename: 'js/[name].[contenthash].js',
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/',
-    clean: true
+    portfolio: ['./src/scripts/app.js'],
   },
   devtool: 'source-map',
   plugins: [

webpack.prod.js

@@ -10,11 +10,6 @@ module.exports = merge(commonConfiguration, {
     portfolio: path.resolve(__dirname, './src/scripts/app.js'),
   },
   devtool: 'source-map',
-  output: {
-    filename: 'js/[name].[contenthash].js',
-    path: path.resolve(__dirname, './dist'),
-    clean: true
-  },
   plugins: [
     // new ImageMinimizerPlugin({
     //   minimizerOptions: {