diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c4de630 --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +/threejs-example/example_01/node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md index 8e6ee72..4353ce8 100644 --- a/README.md +++ b/README.md @@ -1 +1,16 @@ -# threejs-modules \ No newline at end of file +# threejs-modules + +- build a project + + npm init @vitejs/app + +- intsall three.js pakeage + + npm install --save three + +- run project + npm run dev + +## toturial + +https://threejsfundamentals.org/threejs/lessons/zh_cn/ diff --git a/threejs-example/example_01/.gitignore b/threejs-example/example_01/.gitignore new file mode 100644 index 0000000..53f7466 --- /dev/null +++ b/threejs-example/example_01/.gitignore @@ -0,0 +1,5 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local \ No newline at end of file diff --git a/threejs-example/example_01/assets/img/icon/7.jpeg b/threejs-example/example_01/assets/img/icon/7.jpeg new file mode 100644 index 0000000..b52adc2 Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/7.jpeg differ diff --git a/threejs-example/example_01/assets/img/icon/Bulbasaur.png b/threejs-example/example_01/assets/img/icon/Bulbasaur.png new file mode 100644 index 0000000..ff6d416 Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/Bulbasaur.png differ diff --git a/threejs-example/example_01/assets/img/icon/Charmander.png b/threejs-example/example_01/assets/img/icon/Charmander.png new file mode 100644 index 0000000..6b91d79 Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/Charmander.png differ diff --git a/threejs-example/example_01/assets/img/icon/Farfetch'd.png b/threejs-example/example_01/assets/img/icon/Farfetch'd.png new file mode 100644 index 0000000..5b54011 Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/Farfetch'd.png differ diff --git a/threejs-example/example_01/assets/img/icon/Jigglypuff.png b/threejs-example/example_01/assets/img/icon/Jigglypuff.png new file mode 100644 index 0000000..6dc8041 Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/Jigglypuff.png differ diff --git a/threejs-example/example_01/assets/img/icon/Pikachu-music.png b/threejs-example/example_01/assets/img/icon/Pikachu-music.png new file mode 100644 index 0000000..9b917fd Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/Pikachu-music.png differ diff --git a/threejs-example/example_01/assets/img/icon/Pikachu.png b/threejs-example/example_01/assets/img/icon/Pikachu.png new file mode 100644 index 0000000..16c1182 Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/Pikachu.png differ diff --git a/threejs-example/example_01/assets/img/icon/Snorlax.png b/threejs-example/example_01/assets/img/icon/Snorlax.png new file mode 100644 index 0000000..3581b05 Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/Snorlax.png differ diff --git a/threejs-example/example_01/assets/img/icon/Squirtle.png b/threejs-example/example_01/assets/img/icon/Squirtle.png new file mode 100644 index 0000000..299b74d Binary files /dev/null and b/threejs-example/example_01/assets/img/icon/Squirtle.png differ diff --git a/threejs-example/example_01/assets/img/moon.jpg b/threejs-example/example_01/assets/img/moon.jpg new file mode 100644 index 0000000..81e639c Binary files /dev/null and b/threejs-example/example_01/assets/img/moon.jpg differ diff --git a/threejs-example/example_01/assets/img/normal.jpg b/threejs-example/example_01/assets/img/normal.jpg new file mode 100644 index 0000000..8dd8e6d Binary files /dev/null and b/threejs-example/example_01/assets/img/normal.jpg differ diff --git a/threejs-example/example_01/assets/img/space.jpg b/threejs-example/example_01/assets/img/space.jpg new file mode 100644 index 0000000..e893e2b Binary files /dev/null and b/threejs-example/example_01/assets/img/space.jpg differ diff --git a/threejs-example/example_01/favicon.svg b/threejs-example/example_01/favicon.svg new file mode 100644 index 0000000..de4aedd --- /dev/null +++ b/threejs-example/example_01/favicon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/threejs-example/example_01/index.html b/threejs-example/example_01/index.html new file mode 100644 index 0000000..9e3093b --- /dev/null +++ b/threejs-example/example_01/index.html @@ -0,0 +1,58 @@ + + + + + + + Vite App + + + +
+
Three.js
+ +
+ + + diff --git a/threejs-example/example_01/main.js b/threejs-example/example_01/main.js new file mode 100644 index 0000000..3a5d104 --- /dev/null +++ b/threejs-example/example_01/main.js @@ -0,0 +1,132 @@ +import "./style.css"; + +import * as THREE from "three"; +import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; + +// get a scene +const scene = new THREE.Scene(); +// +// get a camera +const camera = new THREE.PerspectiveCamera( + 75, + window.innerWidth / window.innerHeight, + 0.01, + 1000 +); +// get a renderer to render the canvas +const renderer = new THREE.WebGLRenderer({ + canvas: document.querySelector("#bg"), +}); + +// set the renderer pixel +renderer.setPixelRatio(window.devicePixelRatio); +// set the render size +renderer.setSize(window.innerWidth, window.innerHeight); +camera.position.setZ(30); + +// then add object +// the {x,y,z} points that makeup a shape +const geometry = new THREE.TorusGeometry(10, 3, 16, 100); +// add color so use material -> the wrapping papper for an object + +// const material = new THREE.MeshBasicMaterial({ +// color: 0xff6347, +// wireframe: true, +// }); //this one does't need light + +// this material needs light +const material = new THREE.MeshStandardMaterial({ color: 0xff6347 }); + +// add object and material into a mesh +const torus = new THREE.Mesh(geometry, material); + +// the let mesh be added into scene +scene.add(torus); + +// so add a light here +const pointLight = new THREE.PointLight(0xffffff); +pointLight.position.set(5, 5, 5); + +const ambientLight = new THREE.AmbientLight(0xffffff); +scene.add(pointLight, ambientLight); + +// add light helper here +const lightHelper = new THREE.PointLightHelper(pointLight); +const gridHelper = new THREE.GridHelper(200, 50); +scene.add(lightHelper, gridHelper); + +const controls = new OrbitControls(camera, renderer.domElement); + +function addStar() { + const geometry = new THREE.SphereGeometry(0.25, 24, 24); + const material = new THREE.MeshStandardMaterial({ color: "#ffffffff" }); + const star = new THREE.Mesh(geometry, material); + + const [x, y, z] = Array(3) + .fill() + .map(() => THREE.MathUtils.randFloatSpread(100)); + star.position.set(x, y, z); + scene.add(star); +} +Array(200).fill().forEach(addStar); + +const spaceTexture = new THREE.TextureLoader().load("/assets/img/space.jpg"); +scene.background = spaceTexture; + +renderer.render(scene, camera); + +// Avatar +const pikachu = new THREE.TextureLoader().load("/assets/img/icon/Pikachu.png"); +const pik = new THREE.Mesh( + new THREE.BoxGeometry(3, 3, 3), + new THREE.MeshBasicMaterial({ map: pikachu }) +); +// pik.position.set(12, 10, 0); + +scene.add(pik); +// Moon +const moonTexture = new THREE.TextureLoader().load("/assets/img/moon.jpg"); +const normalTexture = new THREE.TextureLoader().load("/assets/img/normal.jpg"); + +const moon = new THREE.Mesh( + new THREE.SphereGeometry(3, 32, 32), + new THREE.MeshStandardMaterial({ + map: moonTexture, + normalMap: normalTexture, + }) +); + +// moon.position.set(20, 20, 20); +moon.position.z = 20; +moon.position.setX(-5); + +scene.add(moon); + +// function moveCamera() { +// const t = document.body.getBoundingClientRect().top; +// moon.rotation.x += 0.05; +// moon.rotation.y += 0.075; +// moon.rotation.z += 0.05; + +// pik.rotation.y += 0.01; +// pik.rotation.z += 0.01; + +// camera.position.z = t * -0.01; +// camera.position.x = t * -0.0002; +// camera.position.y = t * -0.0002; +// } +// document.body.onscroll = moveCamera; + +function animate() { + requestAnimationFrame(animate); + torus.rotation.x += 0.01; + torus.rotation.y += 0.005; + torus.rotation.z += 0.01; + + moon.rotation.y += 0.01; + + controls.update(); + renderer.render(scene, camera); +} + +animate(); diff --git a/threejs-example/example_01/package-lock.json b/threejs-example/example_01/package-lock.json new file mode 100644 index 0000000..39293d2 --- /dev/null +++ b/threejs-example/example_01/package-lock.json @@ -0,0 +1,255 @@ +{ + "name": "example_01", + "version": "0.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "esbuild": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.15.tgz", + "integrity": "sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==", + "dev": true, + "requires": { + "esbuild-android-arm64": "0.13.15", + "esbuild-darwin-64": "0.13.15", + "esbuild-darwin-arm64": "0.13.15", + "esbuild-freebsd-64": "0.13.15", + "esbuild-freebsd-arm64": "0.13.15", + "esbuild-linux-32": "0.13.15", + "esbuild-linux-64": "0.13.15", + "esbuild-linux-arm": "0.13.15", + "esbuild-linux-arm64": "0.13.15", + "esbuild-linux-mips64le": "0.13.15", + "esbuild-linux-ppc64le": "0.13.15", + "esbuild-netbsd-64": "0.13.15", + "esbuild-openbsd-64": "0.13.15", + "esbuild-sunos-64": "0.13.15", + "esbuild-windows-32": "0.13.15", + "esbuild-windows-64": "0.13.15", + "esbuild-windows-arm64": "0.13.15" + } + }, + "esbuild-android-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz", + "integrity": "sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==", + "dev": true, + "optional": true + }, + "esbuild-darwin-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz", + "integrity": "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==", + "dev": true, + "optional": true + }, + "esbuild-darwin-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz", + "integrity": "sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==", + "dev": true, + "optional": true + }, + "esbuild-freebsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz", + "integrity": "sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==", + "dev": true, + "optional": true + }, + "esbuild-freebsd-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz", + "integrity": "sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==", + "dev": true, + "optional": true + }, + "esbuild-linux-32": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz", + "integrity": "sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==", + "dev": true, + "optional": true + }, + "esbuild-linux-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz", + "integrity": "sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==", + "dev": true, + "optional": true + }, + "esbuild-linux-arm": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz", + "integrity": "sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==", + "dev": true, + "optional": true + }, + "esbuild-linux-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz", + "integrity": "sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==", + "dev": true, + "optional": true + }, + "esbuild-linux-mips64le": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz", + "integrity": "sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==", + "dev": true, + "optional": true + }, + "esbuild-linux-ppc64le": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz", + "integrity": "sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==", + "dev": true, + "optional": true + }, + "esbuild-netbsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz", + "integrity": "sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==", + "dev": true, + "optional": true + }, + "esbuild-openbsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz", + "integrity": "sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==", + "dev": true, + "optional": true + }, + "esbuild-sunos-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz", + "integrity": "sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==", + "dev": true, + "optional": true + }, + "esbuild-windows-32": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz", + "integrity": "sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==", + "dev": true, + "optional": true + }, + "esbuild-windows-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz", + "integrity": "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==", + "dev": true, + "optional": true + }, + "esbuild-windows-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz", + "integrity": "sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==", + "dev": true, + "optional": true + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, + "function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, + "requires": { + "function-bind": "^1.1.1" + } + }, + "is-core-module": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz", + "integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, + "nanoid": { + "version": "3.1.30", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", + "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", + "dev": true + }, + "path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "postcss": { + "version": "8.3.11", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz", + "integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==", + "dev": true, + "requires": { + "nanoid": "^3.1.30", + "picocolors": "^1.0.0", + "source-map-js": "^0.6.2" + } + }, + "resolve": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", + "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", + "dev": true, + "requires": { + "is-core-module": "^2.2.0", + "path-parse": "^1.0.6" + } + }, + "rollup": { + "version": "2.60.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.1.tgz", + "integrity": "sha512-akwfnpjY0rXEDSn1UTVfKXJhPsEBu+imi1gqBA1ZkHGydUnkV/fWCC90P7rDaLEW8KTwBcS1G3N4893Ndz+jwg==", + "dev": true, + "requires": { + "fsevents": "~2.3.2" + } + }, + "source-map-js": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", + "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==", + "dev": true + }, + "three": { + "version": "0.134.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.134.0.tgz", + "integrity": "sha512-LbBerg7GaSPjYtTOnu41AMp7tV6efUNR3p4Wk5NzkSsNTBuA5mDGOfwwZL1jhhVMLx9V20HolIUo0+U3AXehbg==" + }, + "vite": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/vite/-/vite-2.6.14.tgz", + "integrity": "sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==", + "dev": true, + "requires": { + "esbuild": "^0.13.2", + "fsevents": "~2.3.2", + "postcss": "^8.3.8", + "resolve": "^1.20.0", + "rollup": "^2.57.0" + } + } + } +} diff --git a/threejs-example/example_01/package.json b/threejs-example/example_01/package.json new file mode 100644 index 0000000..5ffd781 --- /dev/null +++ b/threejs-example/example_01/package.json @@ -0,0 +1,15 @@ +{ + "name": "example_01", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview" + }, + "devDependencies": { + "vite": "^2.6.4" + }, + "dependencies": { + "three": "^0.134.0" + } +} diff --git a/threejs-example/example_01/style.css b/threejs-example/example_01/style.css new file mode 100644 index 0000000..588d65e --- /dev/null +++ b/threejs-example/example_01/style.css @@ -0,0 +1,16 @@ +canvas { + position: fixed; + top: 0; + left: 0; +} + +main { + position: absolute; + width: 100vw; + color: white; + z-index: 99; + margin: 0px auto; + padding: 120px 0; + /* display: grid; + grid-template-columns: repeat(12, 1fr); */ +}