diff --git a/package.json b/package.json index b2b3a91..55ea82b 100644 --- a/package.json +++ b/package.json @@ -25,11 +25,15 @@ "html-webpack-plugin": "^5.5.0", "image-minimizer-webpack-plugin": "^3.2.3", "mini-css-extract-plugin": "^2.6.0", + "postcss": "^8.4.8", "postcss-loader": "^6.2.1", + "postcss-preset-env": "^7.4.2", + "querystring-es3": "^0.2.1", "resolve-url-loader": "^5.0.0", "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", @@ -37,6 +41,7 @@ "webpack-merge": "^5.8.0" }, "dependencies": { + "@react-three/drei": "^8.16.5", "@react-three/fiber": "^7.0.26", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..7ac7ac2 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +const tailwindcss = require('tailwindcss'); +module.exports = { + plugins: [ + 'postcss-preset-env', + tailwindcss + ], +}; \ No newline at end of file diff --git a/src/components/App.jsx b/src/components/App.jsx index 667b754..3a942fc 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,6 +1,7 @@ import '../styles/styles.scss'; import { useRef, useState } from 'react'; import { Canvas, useFrame } from '@react-three/fiber'; +import { PresentationControls } from '@react-three/drei' const Box = (props) => { // This reference gives us direct access to the THREE.Mesh object @@ -29,14 +30,18 @@ const App = () => { return ( <> - - - - - - +
+ {/* + + + + + + + */} +
); }; diff --git a/src/scripts/app.js b/src/scripts/app.js index be89ccc..96f455f 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -1,8 +1,15 @@ +import { Suspense } from 'react'; +import { Loader } from '@react-three/drei'; import { render } from 'react-dom'; import App from '../components/App'; render( - , + <> + + + + + , document.getElementById("root") ); if (module['hot']) { diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 69c38a8..d45c725 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,3 +1,12 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + main { - background-color: black; + #canvas-container { + canvas { + width: 100%; + height: 100%; + } + } } \ No newline at end of file diff --git a/src/views/index.html b/src/views/index.html index 1fa7e21..adf74c9 100644 --- a/src/views/index.html +++ b/src/views/index.html @@ -4,7 +4,9 @@ - Document + Designer and Developer + +
diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..a8ea1e4 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,11 @@ +module.exports = { + purge: ['./src/**/*.html', './src/components/**/*.jsx'], + content: ["./src/**/*.{html,js,jsx}"], + theme: { + extend: {}, + fontFamily: { + sans: ['Museo Sans'] + } + }, + plugins: [], +} diff --git a/webpack.common.js b/webpack.common.js index 88b8295..563e64b 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -14,6 +14,9 @@ const path = require('path'); module.exports = { resolve: { extensions: ['.js', '.jsx'], + fallback: { + "querystring": require.resolve("querystring-es3") + } }, module: { rules: [