diff --git a/src/assets/textures/SurfaceImperfections003_1K_Normal.jpg b/src/assets/textures/SurfaceImperfections003_1K_Normal.jpg new file mode 100644 index 0000000..961e66a Binary files /dev/null and b/src/assets/textures/SurfaceImperfections003_1K_Normal.jpg differ diff --git a/src/assets/textures/SurfaceImperfections003_1K_var1.jpg b/src/assets/textures/SurfaceImperfections003_1K_var1.jpg new file mode 100644 index 0000000..f3aefe2 Binary files /dev/null and b/src/assets/textures/SurfaceImperfections003_1K_var1.jpg differ diff --git a/src/assets/videos/drei.mp4 b/src/assets/videos/drei.mp4 new file mode 100644 index 0000000..9c90f5f Binary files /dev/null and b/src/assets/videos/drei.mp4 differ diff --git a/src/components/App.jsx b/src/components/App.jsx index d0da4c3..00960a2 100644 --- a/src/components/App.jsx +++ b/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 { PresentationControls } from '@react-three/drei'; +import { Canvas, useFrame, useThree } from '@react-three/fiber'; +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 [clicked, click] = useState(false) + const [hovered, hover] = 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 ( { }; const App = () => { + const [video] = useState(() => Object.assign(document.createElement('video'), { src: '../assets/videos/drei.mp4', crossOrigin: 'Anonymous', loop: true })) return ( <> - -
- - - - - - - - -
+ + + + + + + drei + + + + + + {/* + */} + + + + + + + + ); }; diff --git a/src/styles/styles.scss b/src/styles/styles.scss index d45c725..2ea386b 100644 --- a/src/styles/styles.scss +++ b/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 { - width: 100%; - height: 100%; - } + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; } } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index a8ea1e4..15b08dc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,8 @@ module.exports = { - purge: ['./src/**/*.html', './src/components/**/*.jsx'], - content: ["./src/**/*.{html,js,jsx}"], + content: [ + "./src/**/*.{html,js}", + './src/components/**/*.jsx' + ], theme: { extend: {}, fontFamily: { diff --git a/webpack.common.js b/webpack.common.js index 563e64b..7c59bef 100644 --- a/webpack.common.js +++ b/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, - type: 'asset', + test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i, + 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', diff --git a/webpack.dev.js b/webpack.dev.js index 14b674a..8cf80b0 100644 --- a/webpack.dev.js +++ b/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, - // hotUpdateChunkFilename: 'hot/hot-update.js', - // hotUpdateMainFilename: 'hot/hot-update.json' + clean: true }, devtool: 'source-map', plugins: [ new webpack.HotModuleReplacementPlugin(), - new MiniCSSExtractPlugin({ - filename: 'css/[name].[contenthash].css', - }), // new ImageMinimizerPlugin({ // minimizerOptions: { // // Lossless optimization with custom option diff --git a/webpack.prod.js b/webpack.prod.js index 629e821..7733312 100644 --- a/webpack.prod.js +++ b/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, - assetModuleFilename: 'assets/images/[name][ext][query]', + clean: true }, plugins: [ - new CleanWebpackPlugin(), - new MiniCSSExtractPlugin({ - filename: 'css/[name].[contenthash].css', - }), // new ImageMinimizerPlugin({ // minimizerOptions: { // // Lossless optimization with custom option