Adding in sweeping changes

src/components/App.jsx

@@ -1,16 +1,25 @@
 import '../styles/styles.scss';
+import * as THREE from 'three';
 import { useRef, useState } from 'react';
-import { Canvas, useFrame } from '@react-three/fiber';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
-import { PresentationControls } from '@react-three/drei';
+import { MeshReflectorMaterial, Environment, ContactShadows, Text } 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()
+  const ref = useRef();
+  
   // Hold state for hovered and clicked events
-  const [hovered, hover] = useState(false)
+  const [hovered, hover] = useState(false);
-  const [clicked, click] = useState(false)
+  const [clicked, click] = useState(false);
+
   // Subscribe this component to the render-loop, rotate the mesh every frame
-  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
+  useFrame((state, delta) => {
+    gsap.to( ref.current.rotation, {
+      x: "+= 0.1"
+    });
+  });
+
   // Return the view, these are regular Threejs elements expressed in JSX
   return (
     <mesh
@@ -27,21 +36,42 @@ const Box = (props) => {
 };
 
 const App = () => {
+  const [video] = useState(() => Object.assign(document.createElement('video'), { src: '../assets/videos/drei.mp4', crossOrigin: 'Anonymous', loop: true }))
   return (
     <>
-      <nav>
+      <Canvas flat dpr={[1, 2]} camera={{ fov: 25, position: [-8, 0, 0] }} id="canvas-container" style={{position: 'absolute'}}>
-        <h1 className="underline text-xl">Nav</h1>
+        <color attach="background" args={['#191920']} />
-      </nav>
+        <fog attach="fog" args={['#191920', 0, 15]} />
-      <div id="canvas-container">
+        <ambientLight intensity={0.5} />
-        <Canvas>
+        <pointLight position={[10, 10, 10]} />
-          <PresentationControls global zoom={0.8} rotation={[0, -Math.PI / 4, 0]} polar={[0, Math.PI / 4]} azimuth={[-Math.PI / 4, Math.PI / 4]}>
+        <Text font='' position={[0, 0.5, 0]} fontSize={2} letterSpacing={-0.06} rotation={[0, -Math.PI / 2, 0]}>
-            <ambientLight />
+          drei
-            <pointLight position={[10, 10, 10]} />
+          <meshBasicMaterial toneMapped={false}>
-            <Box position={[-1.2, 0, 0]} />
+            <videoTexture attach="map" args={[video]} encoding={THREE.sRGBEncoding} />
-            <Box position={[1.2, 0, 0]} />
+          </meshBasicMaterial>
-          </PresentationControls>
+        </Text>
-        </Canvas>
+        <group position={[0, -0.5, 0]}>
-      </div>
+          {/* <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>
+        </group>
+        <Environment preset="city" />
+        <ContactShadows frames={1}></ContactShadows>
+      </Canvas>
     </>
   );
 };

src/styles/styles.scss

@@ -1,12 +1,23 @@
+@tailwind preflight;
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-main {
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  position: relative;
+  height: 100vh;
   #canvas-container {
-    canvas {
+    position: absolute;
-      width: 100%;
+    top: 0;
-      height: 100%;
+    left: 0;
-    }
+    width: 100%;
+    height: 100%;
+    z-index: 0;
   }
 }

tailwind.config.js

@@ -1,6 +1,8 @@
 module.exports = {
-  purge: ['./src/**/*.html', './src/components/**/*.jsx'],
+  content: [
-  content: ["./src/**/*.{html,js,jsx}"],
+    "./src/**/*.{html,js}",
+    './src/components/**/*.jsx'
+  ],
   theme: {
     extend: {},
     fontFamily: {

webpack.common.js

@@ -1,6 +1,7 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 // let htmlPageNames = [];
 // let multipleHtmlPlugins = htmlPageNames.map(name => {
@@ -59,8 +60,11 @@ module.exports = {
       // Images
 
       {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i,
-        type: 'asset',
+        type: 'asset/resource',
+        generator: {
+          filename: 'assets/[name].[ext]'
+        },
       },
 
       // {
@@ -107,10 +111,14 @@ module.exports = {
     ],
   },
   plugins: [
+    new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, './src/views/index.html'),
       inject: 'body',
     }),
+    new MiniCSSExtractPlugin({
+      filename: 'css/[name].[contenthash].css',
+    }),
   ],
   optimization: {
     moduleIds: 'deterministic',

webpack.dev.js

@@ -1,8 +1,6 @@
 const { merge } = require('webpack-merge');
 const webpack = require( 'webpack' );
 const commonConfiguration = require('./webpack.common.js');
-const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 const path = require('path');
 
 const hotMiddlewareScript =
@@ -17,16 +15,11 @@ module.exports = merge(commonConfiguration, {
     filename: 'js/[name].[contenthash].js',
     path: path.resolve(__dirname, './dist'),
     publicPath: '/',
-    clean: true,
+    clean: true
-    // hotUpdateChunkFilename: 'hot/hot-update.js',
-    // hotUpdateMainFilename: 'hot/hot-update.json'
   },
   devtool: 'source-map',
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new MiniCSSExtractPlugin({
-      filename: 'css/[name].[contenthash].css',
-    }),
     // new ImageMinimizerPlugin({
     //   minimizerOptions: {
     //     // Lossless optimization with custom option

webpack.prod.js

@@ -1,11 +1,8 @@
 const { merge } = require('webpack-merge');
 const commonConfiguration = require('./webpack.common.js');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const path = require('path');
-const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const HtmlCriticalPlugin = require('html-critical-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 module.exports = merge(commonConfiguration, {
   mode: 'production',
@@ -16,14 +13,9 @@ module.exports = merge(commonConfiguration, {
   output: {
     filename: 'js/[name].[contenthash].js',
     path: path.resolve(__dirname, './dist'),
-    clean: true,
+    clean: true
-    assetModuleFilename: 'assets/images/[name][ext][query]',
   },
   plugins: [
-    new CleanWebpackPlugin(),
-    new MiniCSSExtractPlugin({
-      filename: 'css/[name].[contenthash].css',
-    }),
     // new ImageMinimizerPlugin({
     //   minimizerOptions: {
     //     // Lossless optimization with custom option