sayudhalw/03-First-Three-JS-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sayudhalw/03-First-Three-JS-Project:e190aea4b694340750079fabe9bdb49f50980f1b
Branches Tags
sayudhalw/03-First-Three-JS-Project:main
..
compare: sayudhalw/03-First-Three-JS-Project:main
Branches Tags
sayudhalw/03-First-Three-JS-Project:main
17 Commits
e190aea4b6 .. main
Author SHA1 Message Date
sayudhalw 6c3768e477 Refactor lighting and shadows in the scene 
- Removed pnpm-workspace.yaml configuration for esbuild.
- Updated index.html title from "Lights" to "Shadows".
- Enhanced script.js with new shadow textures and improved lighting setup:
  - Added ambient, directional, spot, and point lights with shadow capabilities.
  - Removed unused light configurations and helpers for clarity.
  - Introduced shadow casting and receiving for objects.
  - Updated sphere movement and shadow opacity based on position.
- Added bakedShadow.jpg and simpleShadow.jpg texture files for shadow effects.
 2026-08-27 10:53:36 +07:00
sayudhalw 01d3267942 refactor: enhance lighting setup with additional light types and helpers 2026-08-26 07:56:00 +07:00
sayudhalw 297e1c83e6 refactor: update lighting setup in script.js, adding new light types and GUI controls 2026-08-25 19:56:05 +07:00
sayudhalw 0212ab224c refactor: update title in index.html and clean up script.js, removing unused textures 2026-08-25 14:20:03 +07:00
sayudhalw 9f184ed90b Refactor materials and textures in the project 
- Updated the title in index.html from "Textures" to "Materials".
- Enhanced script.js by adding GUI controls for material properties and loading various textures.
- Removed unused textures: checkerboard-1024x1024.png, checkerboard-8x8.png, and minecraft.png.
- Added new textures: environmentMap/2k.hdr, gradients/3.jpg, gradients/5.jpg, and multiple matcap textures (1.png to 8.png).
- Implemented a MeshPhysicalMaterial with adjustable properties for metalness, roughness, transmission, and thickness.
- Updated object rotations for better visual effects in the scene.
 2026-08-25 12:22:39 +07:00
sayudhalw a345a4c057 refactor: remove GSAP and lil-gui dependencies, update project structure and textures 2026-08-25 10:10:49 +07:00
sayudhalw 2680337232 refactor: integrate gsap and lil-gui for enhanced debugging and animation controls 2026-08-25 05:56:11 +07:00
sayudhalw 0df0119434 refactor: update geometry creation to include additional parameters for BoxGeometry 2026-08-24 19:52:45 +07:00
sayudhalw df350c2096 refactor: update geometry creation to use BufferGeometry for improved performance 2026-08-24 17:33:47 +07:00
sayudhalw 19aa918d0e refactor: remove GSAP dependency and update code structure for improved readability 2026-08-24 12:45:42 +07:00
sayudhalw cda633bea1 refactor: replace clock with Timer for animation updates 2026-08-24 07:32:53 +07:00
sayudhalw 9c52c11d90 refactor: remove GSAP dependency and update camera controls with OrbitControls 2026-08-24 07:20:55 +07:00
sayudhalw ad3370d274 feat: implement cursor-based camera movement and update camera initialization 2026-08-23 22:19:32 +07:00
sayudhalw 6a8f2e0cb5 fix: add near and far clipping planes to camera initialization 2026-08-23 21:32:21 +07:00
sayudhalw c7f275d784 refactor: replace GSAP with Timer for animation updates 2026-08-23 20:47:03 +07:00
sayudhalw ced9c2b65a feat: integrate GSAP for object animations and update package dependencies 2026-08-23 20:43:55 +07:00
sayudhalw cebdb9e921 fix: update animation logic for smoother object movement 2026-08-23 16:52:40 +07:00
9 changed files with 337 additions and 152 deletions
Expand all files Collapse all files
package.json
+1
View File
@@ -12,6 +12,7 @@
"vite-plugin-restart": "^0.4.2" "vite-plugin-restart": "^0.4.2"
}, },
"dependencies": { "dependencies": {
"lil-gui": "^0.20.0",
"three": "^0.174.0" "three": "^0.174.0"
} }
} }
pnpm-lock.yaml
Generated
+121 -113
View File
@@ -8,6 +8,9 @@ importers:
.: .:
dependencies: dependencies:
lil-gui:
specifier: ^0.20.0
version: 0.20.0
three: three:
specifier: ^0.174.0 specifier: ^0.174.0
version: 0.174.0 version: 0.174.0
@@ -184,141 +187,141 @@ packages:
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-RrPokAb7dmbxFoeO3TloqHyOjgye8RkBhSqmp4aJMIex4c9r46ZstPnleDQOq1t46VOVjwIuwNogIqbodV1Vvg==} resolution: {integrity: sha512-70TeIFezKKy65LgAVyQh+w94/gjWhvPWaLaGGeMEgVrPkQhuj/M5bAYYZzIFUj9Y69oHyTm5Um/R6gcLh4A8JA==}
cpu: [arm] cpu: [arm]
os: [android] os: [android]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-JKuJc+pnpks2pjy7L/N3v/cAkZxYlnmuZoD840ldbMI5KDbC4iO9NKwPKYdjYFCMAIIlBzYSFHxIJVYzRo2/8A==} resolution: {integrity: sha512-YC86tYIHK6M1IV+wbzO+Bxk8RCBr6ZyWYgWxUCzaZD8mc8rrFoIJDNzDrkHBYRc/wKdrsIXmm6/F7NzrAO+OrA==}
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-krw5uS2STmvJ02x0uTXHbqQNuz+9eZ1iw+qXk9dmW2gvV4jV7O2hEoOnuhFrpOPiel1mBFtqbxYZZtC46hXLOw==} resolution: {integrity: sha512-oI+ECtUcli0y0fi4xpW82GdPIXdTkI8G8DSjG2LRuw09fPAGykaWYH/hXxiKuTxiAjiPSTIIuYUqof5Z2hShWw==}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-wsTxtgApb4PrOsNJIm0FZ1h3WvCC+k9uxLJ4ad75hgoS4NiRes2SoJFlDAyMwiUY8IssDqGcHbXuN0sx1tfF1A==} resolution: {integrity: sha512-NwV+1s7TiKrMe4owHyKB/dTLD7ZJD0YEBEhIz+hvav1Cu1GReJjF+rsdNwjzENQeIAbE/CoNiaAc5Vz2h5DPAA==}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-GUOnQlyZe3yAXhWOtOMsn5Qkrv5E5mZXa0thbARWi5Ei2szlVXJFQhddZ4HbAzh8q92w5twp+CQvs/eFanz9YQ==} resolution: {integrity: sha512-tWtHBTu5gOPK4u4Urtk4qAHW3zZ9rQAmbssO8gp7ELvGTGI3aCiq6NqyTQ0PCIg7KbHJF2UkGDDs77YZGxfjCA==}
cpu: [arm64] cpu: [arm64]
os: [freebsd] os: [freebsd]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-/Y7f3QuxjzPKsjA/rfEDa3+0vXqyjmJ50Ln8dPpCmWkKTrUoWHG1cWhTqaAMLob2m2nESWuC7yGrREz019Ztqg==} resolution: {integrity: sha512-2qPoJiwTvtHQ27NnYvTnsgk8laXWYuVmNESG8WFZBcEPKLfZ3I27qBJarjVRQtwGeYyRfq5ZowHXih9lm2BItw==}
cpu: [x64] cpu: [x64]
os: [freebsd] os: [freebsd]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==} resolution: {integrity: sha512-FQwsTRvLNuHoTdICABJQfbPUSEueISGmnpT06tXTMpfprf5NiKLSXKA0A+w45wJnCmZAnzgqBwbt6ARFuyOi5w==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==} resolution: {integrity: sha512-BBVTXziw8mY1a4ZbWME9tZyfzqXCDPqaC7Z3heQ29p5dkvXzwL0NwelO8zLa8c3RBKvl3YTuSnBgsBhYBtwjIw==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==} resolution: {integrity: sha512-w2Iyy9+RqKwx3d9qWMKsJg0FfRBsY0/pXNv0mCQ3ueRvJI6+QAScfD4nrMlzFLs2HNVW6Ew+mtZfDl9b7Ew5/Q==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==} resolution: {integrity: sha512-YK++KtrFRHYE0P6/RtYEAy9t8F37znP+K03RrIuLPYOL6SVlObRumf/0OE4V/h63xL9DwkWbNssZfmA9hawuDA==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==} resolution: {integrity: sha512-aBfOG6fP7YkkPmTqPwufRJeFyz7WPpECv9XNbnsk9+vg7rxdih0lbtEel7jcRng4LZrrmU3FfitCFyEj4BWDWg==}
cpu: [loong64] cpu: [loong64]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==} resolution: {integrity: sha512-LGaHEOeHNAag9VuS1Crs5DFg4RrU9MPi2nVnNJk9DTePx/B6RRYKVmrIXt2h7YOJlwjaFJ6lwtFDliZxScTLrQ==}
cpu: [loong64] cpu: [loong64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==} resolution: {integrity: sha512-jClvk+J0FC3b7Udvegiw5/4hErbHtmsNsQgENnKXDWtNCJXsJYZH5WURvu7imDOO38xYml24eeh5x3A04ppwCw==}
cpu: [ppc64] cpu: [ppc64]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==} resolution: {integrity: sha512-0OJlaGK+8+B777Ql5okIpD7ua5Ro9+VB9Ve0OKa28OQJZ1RbuUBVNHK/e3pr4BROqsyPl1JrPO1ZxJseCNffcA==}
cpu: [ppc64] cpu: [ppc64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==} resolution: {integrity: sha512-Ygsx+HoNH7afwi1bTIXbnTvVnsO+zurPLSYxybV1hHFVU72OWOCl6v05ql/z0hkpAPx+DK7Kn9Bi7MayCcjLTA==}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==} resolution: {integrity: sha512-pDQxtMGb+OvG3fLwR2OkZlSd47hW+kWg4BYMG/++sR6RqorQccwPTDsxda5hPwiIeIErAnCF9ma3SAU06bdQtQ==}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==} resolution: {integrity: sha512-0BnUG9mS8I4SSHr3XsxVhuCMEiu+rX61xxZF5vujso4LaiAGFZFxvDjg6Xn6tLPNTUAfuCvQYas4LMQMVsKRSQ==}
cpu: [s390x] cpu: [s390x]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==} resolution: {integrity: sha512-Adu/VttB1dpPNW+FEacrZ+xVm9tFty84+RrFzsqlFaPxoJB+9XXyDGtp5dCOoBwGBIEVH0To7lExFXEx0BIF4A==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==} resolution: {integrity: sha512-NQ3bDvjUbFKmP23671xUlXtKmqVsUBd6M4PQCvbmNtOy06hnQIdKHy8oG/6S3R/S6He1JgPk6A5VT+prAJMYEw==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==} resolution: {integrity: sha512-u2eDAl4+0aFvA13GxlGBtTI3SS3sdgwgtV0HyjZ0QaQVCgNE+jqNGey+GtxWiq+wxr/UycAx/OnfJzApCFamvA==}
cpu: [x64] cpu: [x64]
os: [openbsd] os: [openbsd]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-s62SQ/vgsRSvMwDkOEfTqfgASF0f26ZNaQuTA6Aok5lrikf89yI2W0gFHvZb2Jpgc6N8JnOKZgCK2iciO3CsxQ==} resolution: {integrity: sha512-XvRb5vfW3wAZQ+ZUG21AnHHDKtNcw99eigzEhjr//NZ3u7SoBaPP0seSc7FgP7p1epAEdAoZckMW9WY/+4w70w==}
cpu: [arm64] cpu: [arm64]
os: [openharmony] os: [openharmony]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-J6wGf8TVGbXJq+HH+ttTvrcfNKPbuZecV6KT1B8I18BC5IURUh5kl4Yl5OEP5eFIUoI5BWxCsyYMhFsDx8kekw==} resolution: {integrity: sha512-iZPmniy4kNBf5yo2RezbkYNNK5HPbXE9+g+twnbqSng7dtLEJy1SKoxiE/ni4FDacjyuZpEeb9U054N4EoKHYw==}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-zmfrQd/0wu6oJs8Vq8KwY/YtsKSsLtKe/HwAP4Wqy8LhWjeT55fHRAkOhYQ12wI3ayS4Tt12d5CDRD7N96SAYQ==} resolution: {integrity: sha512-mFBBd+LF37fnE8JnYUOH+imj0aPFPK30vpar4ehJkgnLj9sZn8ZxiRENmLtgIwxK7TC8klF6N57fxdNBwQoqOA==}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-qPzHqdj9rfUD+w79dtE07zi/kFwKyCJqplp5K5ygeLTp7jLpAoc16OAH39HSmRC9UpozaecsleI8uAdEj6v2yw==} resolution: {integrity: sha512-ujeqEY3B+zbGn3Z4Q03cUBG/LGWnBJncVT36WER31LcOsQk9+1dmINKKtvmmfChUvRbK1G0R8OhMWFgHgaZtAw==}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-zD6NdeWEByGE9QF9vCrlJ5YQB4oq9q91kPZS37Jwj5hOkvR1lTBSpsKhKDw4IJtbQ35LsTS1HD9DZYGKIshU1Q==} resolution: {integrity: sha512-hncn90N4sOky0L2LKE5oESKLbxCPeVo4eLA2LSMoDzM+879ml4WSr+Rr4DWknNIVVvS1Hirkc9hx02W6YxS8rQ==}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
@@ -356,6 +359,9 @@ packages:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'} engines: {node: '>=0.12.0'}
[email protected]:
resolution: {integrity: sha512-k7Ipr0ztqslMA2XvM5z5ZaWhxQtnEOwJBfI/hmSuRh6q4iMG9L0boqqrnZSzBR1jzyJ28OMl47l65ILzRe1TdA==}
[email protected]: [email protected]:
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
engines: {node: '>=8.6'} engines: {node: '>=8.6'}
@@ -372,16 +378,16 @@ packages:
resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==} resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
engines: {node: '>=8.6'} engines: {node: '>=8.6'}
[email protected].5: [email protected].7:
resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==} resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
engines: {node: '>=12'} engines: {node: '>=12'}
[email protected]: [email protected]:
resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==} resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==}
engines: {node: ^10 || ^12 || >=14} engines: {node: ^10 || ^12 || >=14}
[email protected]2.4: [email protected]3.0:
resolution: {integrity: sha512-RXOqwaPsBGjMNMa4sQjDjHieHEZDFoj/Rdr46l2MU5DfEs16wHJPC2RPTPHWhNl+M3aI472LLqFkFKut4SblOg==} resolution: {integrity: sha512-T5vnZ2y4QqC3/4P+w2+JO+Q/OVdnPsv4XcSYJYMEn0R9/jjl5AgLwO9LAZMzP2lN71O6pypn91rB7lDstUkfrQ==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
@@ -528,79 +534,79 @@ snapshots:
'@napi-rs/[email protected]': '@napi-rs/[email protected]':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.4': '@rollup/[email protected]3.0':
optional: true optional: true
'@types/[email protected]': {} '@types/[email protected]': {}
@@ -638,9 +644,9 @@ snapshots:
'@esbuild/win32-ia32': 0.25.12 '@esbuild/win32-ia32': 0.25.12
'@esbuild/win32-x64': 0.25.12 '@esbuild/win32-x64': 0.25.12
[email protected]([email protected].5): [email protected]([email protected].7):
optionalDependencies: optionalDependencies:
picomatch: 4.0.5 picomatch: 4.0.7
[email protected]: [email protected]:
dependencies: dependencies:
@@ -651,6 +657,8 @@ snapshots:
[email protected]: {} [email protected]: {}
[email protected]: {}
[email protected]: [email protected]:
dependencies: dependencies:
braces: 3.0.3 braces: 3.0.3
@@ -662,7 +670,7 @@ snapshots:
[email protected]: {} [email protected]: {}
[email protected].5: {} [email protected].7: {}
[email protected]: [email protected]:
dependencies: dependencies:
@@ -670,36 +678,36 @@ snapshots:
picocolors: 1.1.1 picocolors: 1.1.1
source-map-js: 1.2.1 source-map-js: 1.2.1
[email protected]2.4: [email protected]3.0:
dependencies: dependencies:
'@types/estree': 1.0.9 '@types/estree': 1.0.9
optionalDependencies: optionalDependencies:
'@napi-rs/lzma-linux-x64-gnu': 1.5.1 '@napi-rs/lzma-linux-x64-gnu': 1.5.1
'@rollup/rollup-android-arm-eabi': 4.62.4 '@rollup/rollup-android-arm-eabi': 4.63.0
'@rollup/rollup-android-arm64': 4.62.4 '@rollup/rollup-android-arm64': 4.63.0
'@rollup/rollup-darwin-arm64': 4.62.4 '@rollup/rollup-darwin-arm64': 4.63.0
'@rollup/rollup-darwin-x64': 4.62.4 '@rollup/rollup-darwin-x64': 4.63.0
'@rollup/rollup-freebsd-arm64': 4.62.4 '@rollup/rollup-freebsd-arm64': 4.63.0
'@rollup/rollup-freebsd-x64': 4.62.4 '@rollup/rollup-freebsd-x64': 4.63.0
'@rollup/rollup-linux-arm-gnueabihf': 4.62.4 '@rollup/rollup-linux-arm-gnueabihf': 4.63.0
'@rollup/rollup-linux-arm-musleabihf': 4.62.4 '@rollup/rollup-linux-arm-musleabihf': 4.63.0
'@rollup/rollup-linux-arm64-gnu': 4.62.4 '@rollup/rollup-linux-arm64-gnu': 4.63.0
'@rollup/rollup-linux-arm64-musl': 4.62.4 '@rollup/rollup-linux-arm64-musl': 4.63.0
'@rollup/rollup-linux-loong64-gnu': 4.62.4 '@rollup/rollup-linux-loong64-gnu': 4.63.0
'@rollup/rollup-linux-loong64-musl': 4.62.4 '@rollup/rollup-linux-loong64-musl': 4.63.0
'@rollup/rollup-linux-ppc64-gnu': 4.62.4 '@rollup/rollup-linux-ppc64-gnu': 4.63.0
'@rollup/rollup-linux-ppc64-musl': 4.62.4 '@rollup/rollup-linux-ppc64-musl': 4.63.0
'@rollup/rollup-linux-riscv64-gnu': 4.62.4 '@rollup/rollup-linux-riscv64-gnu': 4.63.0
'@rollup/rollup-linux-riscv64-musl': 4.62.4 '@rollup/rollup-linux-riscv64-musl': 4.63.0
'@rollup/rollup-linux-s390x-gnu': 4.62.4 '@rollup/rollup-linux-s390x-gnu': 4.63.0
'@rollup/rollup-linux-x64-gnu': 4.62.4 '@rollup/rollup-linux-x64-gnu': 4.63.0
'@rollup/rollup-linux-x64-musl': 4.62.4 '@rollup/rollup-linux-x64-musl': 4.63.0
'@rollup/rollup-openbsd-x64': 4.62.4 '@rollup/rollup-openbsd-x64': 4.63.0
'@rollup/rollup-openharmony-arm64': 4.62.4 '@rollup/rollup-openharmony-arm64': 4.63.0
'@rollup/rollup-win32-arm64-msvc': 4.62.4 '@rollup/rollup-win32-arm64-msvc': 4.63.0
'@rollup/rollup-win32-ia32-msvc': 4.62.4 '@rollup/rollup-win32-ia32-msvc': 4.63.0
'@rollup/rollup-win32-x64-gnu': 4.62.4 '@rollup/rollup-win32-x64-gnu': 4.63.0
'@rollup/rollup-win32-x64-msvc': 4.62.4 '@rollup/rollup-win32-x64-msvc': 4.63.0
fsevents: 2.3.3 fsevents: 2.3.3
[email protected]: {} [email protected]: {}
@@ -708,8 +716,8 @@ snapshots:
[email protected]: [email protected]:
dependencies: dependencies:
fdir: 6.5.0([email protected].5) fdir: 6.5.0([email protected].7)
picomatch: 4.0.5 picomatch: 4.0.7
[email protected]: [email protected]:
dependencies: dependencies:
@@ -723,10 +731,10 @@ snapshots:
[email protected]: [email protected]:
dependencies: dependencies:
esbuild: 0.25.12 esbuild: 0.25.12
fdir: 6.5.0([email protected].5) fdir: 6.5.0([email protected].7)
picomatch: 4.0.5 picomatch: 4.0.7
postcss: 8.5.26 postcss: 8.5.26
rollup: 4.62.4 rollup: 4.63.0
tinyglobby: 0.2.17 tinyglobby: 0.2.17
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
pnpm-workspace.yaml
-2
View File
@@ -1,2 +0,0 @@
allowBuilds:
esbuild: true
src/index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animations</title> <title>Shadows</title>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
src/script.js
+193 -34
View File
@@ -1,51 +1,210 @@
import './style.css' import * as THREE from 'three';
import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import GUI from 'lil-gui';
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader();
const bakedShadow = textureLoader.load('/textures/bakedShadow.jpg');
bakedShadow.colorSpace = THREE.SRGBColorSpace;
const simpleShadow = textureLoader.load('/textures/simpleShadow.jpg');
simpleShadow.colorSpace = THREE.SRGBColorSpace;
/**
* Base
*/
// Debug
const gui = new GUI();
// Canvas // Canvas
const canvas = document.querySelector('canvas.webgl') const canvas = document.querySelector('canvas.webgl');
// Scene // Scene
const scene = new THREE.Scene() const scene = new THREE.Scene();
// Object /**
const geometry = new THREE.BoxGeometry(1, 1, 1) * Lights
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }) */
const mesh = new THREE.Mesh(geometry, material) // Ambient light
scene.add(mesh) const ambientLight = new THREE.AmbientLight(0xffffff, .4);
gui.add(ambientLight, 'intensity').min(0).max(3).step(0.001);
scene.add(ambientLight);
// Sizes // Directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, .4);
directionalLight.position.set(2, 2, - 1);
gui.add(directionalLight, 'intensity').min(0).max(3).step(0.001);
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001);
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001);
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001);
scene.add(directionalLight);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.camera.top = 2;
directionalLight.shadow.camera.right = 2;
directionalLight.shadow.camera.bottom = - 2;
directionalLight.shadow.camera.left = - 2;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 6;
directionalLight.shadow.radius = 10;
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
directionalLightCameraHelper.visible = false;
scene.add(directionalLightCameraHelper);
// Spot light
const spotLight = new THREE.SpotLight(0xffffff, 3.6, 10, Math.PI * 0.3);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.fov = 30;
spotLight.shadow.camera.near = 1;
spotLight.shadow.camera.far = 6;
spotLight.shadow.radius = 10;
spotLight.position.set(0, 2, 2);
scene.add(spotLight);
scene.add(spotLight.target);
const spotLightCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
spotLightCameraHelper.visible = false;
scene.add(spotLightCameraHelper);
// Point Light
const pointLight = new THREE.PointLight(0xffffff, 2.7);
pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 1024;
pointLight.shadow.mapSize.height = 1024;
pointLight.shadow.camera.near = 0.1;
pointLight.shadow.camera.far = 5;
pointLight.position.set(-1, 1, 0);
scene.add(pointLight);
const pointLightCameraHelper = new THREE.CameraHelper(pointLight.shadow.camera);
pointLightCameraHelper.visible = false;
scene.add(pointLightCameraHelper);
/**
* Materials
*/
const material = new THREE.MeshStandardMaterial();
material.roughness = 0.7;
gui.add(material, 'metalness').min(0).max(1).step(0.001);
gui.add(material, 'roughness').min(0).max(1).step(0.001);
/**
* Objects
*/
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 32, 32),
material
);
sphere.castShadow = true;
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(5, 5),
// new THREE.MeshStandardMaterial({
// map: bakedShadow
// })
material
);
plane.rotation.x = - Math.PI * 0.5;
plane.position.y = - 0.5;
plane.receiveShadow = true;
scene.add(sphere, plane);
const sphereShadow = new THREE.Mesh(
new THREE.PlaneGeometry(1.5, 1.5),
new THREE.MeshBasicMaterial({
color: 0x000000,
transparent: true,
alphaMap: simpleShadow
})
);
sphereShadow.rotation.x = - Math.PI * 0.5;
sphereShadow.position.y = plane.position.y + .01;
scene.add(sphereShadow);
/**
* Sizes
*/
const sizes = { const sizes = {
width: 800, width: window.innerWidth,
height: 600 height: window.innerHeight
} };
// Camera window.addEventListener('resize', () =>
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height) {
camera.position.z = 3 // Update sizes
scene.add(camera) sizes.width = window.innerWidth;
sizes.height = window.innerHeight;
// Renderer // Update camera
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
// Update renderer
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 2;
scene.add(camera);
// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({ const renderer = new THREE.WebGLRenderer({
canvas: canvas canvas: canvas
}) });
renderer.setSize(sizes.width, sizes.height) renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// Clock renderer.shadowMap.enabled = false;
const clock = new THREE.Clock() renderer.shadowMap.type = THREE.PCFSoftShadowMap;
/**
* Animate
*/
const clock = new THREE.Clock();
// Animations const tick = () =>
const tick = () => { {
const elapsedTime = clock.getElapsedTime();
// Clock // Update Sphere
const elapsedTime = clock.getElapsedTime() sphere.position.x = Math.cos(elapsedTime) * 1.5;
sphere.position.z = Math.sin(elapsedTime) * 1.5;
sphere.position.y = Math.abs(Math.sin(elapsedTime) * 3);
// Update objects // Update Shadow
mesh.rotation.y += 0.001 * elapsedTime sphereShadow.position.x = sphere.position.x;
sphereShadow.position.z = sphere.position.z;
sphereShadow.material.opacity = (1 - sphere.position.y) * .3;
// Renderer // Update controls
renderer.render(scene, camera) controls.update();
window.requestAnimationFrame(tick) // Render
} renderer.render(scene, camera);
tick()
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
tick();
src/style.css
+19
View File
@@ -0,0 +1,19 @@
*
{
margin: 0;
padding: 0;
}
html,
body
{
overflow: hidden;
}
.webgl
{
position: fixed;
top: 0;
left: 0;
outline: none;
}
static/door.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 763 KiB

static/textures/bakedShadow.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

static/textures/simpleShadow.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB