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

Refactor lighting and shadows in the scene

Browse Source 
- 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.
This commit is contained in:
sayudhalw
2026-08-27 10:53:36 +07:00
parent 01d3267942
commit 6c3768e477
6 changed files with 214 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pnpm-lock.yaml
Generated
+113 -113
View File
@@ -187,141 +187,141 @@ packages:
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-jfkGfTwhQpsiSckPF8r9bU3pn3vyd72NlWaO+TgEO6WPSDnUhXzrNYCHBMOYj0ACaUgjm6eERLF+XV9a6RstoA==} resolution: {integrity: sha512-70TeIFezKKy65LgAVyQh+w94/gjWhvPWaLaGGeMEgVrPkQhuj/M5bAYYZzIFUj9Y69oHyTm5Um/R6gcLh4A8JA==}
cpu: [arm] cpu: [arm]
os: [android] os: [android]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-oGVqyQlxnrz9/ty89oHpU857VUHEl5/Xu4R2lS+aivCTrNnSsbiENzTnNaBsjxH0CNWGPhzHArOLFwo+oKXveA==} resolution: {integrity: sha512-YC86tYIHK6M1IV+wbzO+Bxk8RCBr6ZyWYgWxUCzaZD8mc8rrFoIJDNzDrkHBYRc/wKdrsIXmm6/F7NzrAO+OrA==}
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-bW7B8xMEq8n99Q3ieEcPRGuphurdZAaFzQc9Efyyw3FL6DZO6pMy9xhdN+kBoD7Sy05xNXSr4OyPPnpkYriS/A==} resolution: {integrity: sha512-oI+ECtUcli0y0fi4xpW82GdPIXdTkI8G8DSjG2LRuw09fPAGykaWYH/hXxiKuTxiAjiPSTIIuYUqof5Z2hShWw==}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-YSwBS86QeHOGlrxJ1PSOIZSkzRL/JmKeunhc+lV6M1a6En8QuVCD/T/qIA0J4Gd2Y86RIOBYrLcOUtqGh9+/1w==} resolution: {integrity: sha512-NwV+1s7TiKrMe4owHyKB/dTLD7ZJD0YEBEhIz+hvav1Cu1GReJjF+rsdNwjzENQeIAbE/CoNiaAc5Vz2h5DPAA==}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-2fST8lILgl7cKbme/1KDdPCmbXbG+gqoV3bHp19L0ypX/3akYMBVdOunPleRCwonoLnXOZ/0F+Mt/v8POFmfcQ==} resolution: {integrity: sha512-tWtHBTu5gOPK4u4Urtk4qAHW3zZ9rQAmbssO8gp7ELvGTGI3aCiq6NqyTQ0PCIg7KbHJF2UkGDDs77YZGxfjCA==}
cpu: [arm64] cpu: [arm64]
os: [freebsd] os: [freebsd]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-cpIxQCP9J+EVad0a6LO1kY3ZGODlk80VlI+2I96B8xMcdHZ4pLVhfQ49JFpYqjPF91FFkQWftf57YlDcTiw9yQ==} resolution: {integrity: sha512-2qPoJiwTvtHQ27NnYvTnsgk8laXWYuVmNESG8WFZBcEPKLfZ3I27qBJarjVRQtwGeYyRfq5ZowHXih9lm2BItw==}
cpu: [x64] cpu: [x64]
os: [freebsd] os: [freebsd]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-r9fGh3eFs3e/udWh5ZjXQtxiYK/xoFxQaYR/cELxac/Udkl5Th+IsFm0CX3Kl9hmUH/we7EoMpjJgeQNnE0+IA==} resolution: {integrity: sha512-FQwsTRvLNuHoTdICABJQfbPUSEueISGmnpT06tXTMpfprf5NiKLSXKA0A+w45wJnCmZAnzgqBwbt6ARFuyOi5w==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-xdvFdp7OM6KLJviJT2g/YuRSUjnZgGHk4RNgwIbN7X6cPugOucV60DdHXWzsBVCUdrGb6qSXnJQrrAKMmQuj3Q==} resolution: {integrity: sha512-BBVTXziw8mY1a4ZbWME9tZyfzqXCDPqaC7Z3heQ29p5dkvXzwL0NwelO8zLa8c3RBKvl3YTuSnBgsBhYBtwjIw==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-rRqILAndyzHzP7T9NFQrq+4HFWNhqkqkKur7eiBpfLmz01PO0JKx5Vchu3YllE4YXI/Ftgq/szrDWg5GJ0mI8g==} 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.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-Gf4X3qVMucayUvux6aXXPgXovocSFUC0rrffDuPI/S2nHhNMhjcZxsrAFYCOF350PRreW1XwzFj3CT/3bKsWCw==} 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.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-+s5qA0TNM0qm8PK/a5gt/1Hpx+NV08uSuCncvhziIlQzT6AEV2fnUQo7eBtFTFO0nA9scauvoR2HusfXmQnO4w==} resolution: {integrity: sha512-aBfOG6fP7YkkPmTqPwufRJeFyz7WPpECv9XNbnsk9+vg7rxdih0lbtEel7jcRng4LZrrmU3FfitCFyEj4BWDWg==}
cpu: [loong64] cpu: [loong64]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-ybb6QvWwWJCbBWqERpc8K3pYVGIrXlG8MEQ8IIuJY6Y9KdHQxoFoNyfkAOtKn1VHu3KuLidXvwrvGR1mEjeWCw==} resolution: {integrity: sha512-LGaHEOeHNAag9VuS1Crs5DFg4RrU9MPi2nVnNJk9DTePx/B6RRYKVmrIXt2h7YOJlwjaFJ6lwtFDliZxScTLrQ==}
cpu: [loong64] cpu: [loong64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-nZb1DtnOyhCmYvsC8A2CwOkopVg+IS1+fPUa7rMOAXtNw5+lLCLLPqd6XAiNrGtoQKsbvIBOwsHnBH/3wnb4HQ==} resolution: {integrity: sha512-jClvk+J0FC3b7Udvegiw5/4hErbHtmsNsQgENnKXDWtNCJXsJYZH5WURvu7imDOO38xYml24eeh5x3A04ppwCw==}
cpu: [ppc64] cpu: [ppc64]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-yMbj63Sp89ryrXLWyz+sy+fYD2HpOnMCLGbe4Oa1smclFSUukdtD/BgdiHaAetJNb74URD8U4hM+qG5KVzMEkg==} resolution: {integrity: sha512-0OJlaGK+8+B777Ql5okIpD7ua5Ro9+VB9Ve0OKa28OQJZ1RbuUBVNHK/e3pr4BROqsyPl1JrPO1ZxJseCNffcA==}
cpu: [ppc64] cpu: [ppc64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-mhoan3OJw2kYV/e1jtIdmvUZgyBFeA6zGWsOswmR0Tg19TQbowZuR+JMLID6spbbBN7Zee2ejrgmy3+FxGrIdA==} resolution: {integrity: sha512-Ygsx+HoNH7afwi1bTIXbnTvVnsO+zurPLSYxybV1hHFVU72OWOCl6v05ql/z0hkpAPx+DK7Kn9Bi7MayCcjLTA==}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-5ZTLmjWbb1VZdjuyhe83K/8QO0/h11midQCBP+X5OYn32ra7eOBoM0ZqtaY4nkgNsYgmdVhMYPoyVPTjUpHf3w==} resolution: {integrity: sha512-pDQxtMGb+OvG3fLwR2OkZlSd47hW+kWg4BYMG/++sR6RqorQccwPTDsxda5hPwiIeIErAnCF9ma3SAU06bdQtQ==}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-m53kG+br6PGxOTmgBEM2DHSDs9RVjsyEbUwjJPJGTFm1grWOG8EKJggDCTb60unD4Tjby8fi7/m9XfkEWasVWg==} resolution: {integrity: sha512-0BnUG9mS8I4SSHr3XsxVhuCMEiu+rX61xxZF5vujso4LaiAGFZFxvDjg6Xn6tLPNTUAfuCvQYas4LMQMVsKRSQ==}
cpu: [s390x] cpu: [s390x]
os: [linux] os: [linux]
libc: [glibc] libc: [glibc]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-6RHPJR1g/uvdYU8uXBnfq3nlqyZCP82Fr6NHgfGoaIeSh0YEqnX/x6uA9MmJJbnSH7swqX4F+CkGdUF+6doiQA==} 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.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-xs+OXQtEXgpXT0DmA5+U3qnRZHdCST/5HRQxS8wSPZTUZN/EMWeHuSIod32LQklTBZBV9DyfncKBQ8n5V3eFdw==} resolution: {integrity: sha512-NQ3bDvjUbFKmP23671xUlXtKmqVsUBd6M4PQCvbmNtOy06hnQIdKHy8oG/6S3R/S6He1JgPk6A5VT+prAJMYEw==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
libc: [musl] libc: [musl]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-e7hD+sl3s+mcLQDZ8pbudBVsdG6r5yN4w3LqG2TJ8sQHDpblWj5lrJs/3m01Cvlxbt4x13zu5thLjgypgtkYzw==} resolution: {integrity: sha512-u2eDAl4+0aFvA13GxlGBtTI3SS3sdgwgtV0HyjZ0QaQVCgNE+jqNGey+GtxWiq+wxr/UycAx/OnfJzApCFamvA==}
cpu: [x64] cpu: [x64]
os: [openbsd] os: [openbsd]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-GiyJaCf+WpMub/17aPcKk27QMl5W6f+KhdPTjlFOn5akH5Wa/DCM9Stdx5cDfmasyKB08MqpVQ1uJE2RkkpbXg==} resolution: {integrity: sha512-XvRb5vfW3wAZQ+ZUG21AnHHDKtNcw99eigzEhjr//NZ3u7SoBaPP0seSc7FgP7p1epAEdAoZckMW9WY/+4w70w==}
cpu: [arm64] cpu: [arm64]
os: [openharmony] os: [openharmony]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-+OQ8U2DdoEfXl8T4Fb18AjmEwbXMerKDKCL8yCPAYhKCEEKoul7rkbeGCBFCbAlaGaa7pmtRTpkAJM2LE/i5FA==} resolution: {integrity: sha512-iZPmniy4kNBf5yo2RezbkYNNK5HPbXE9+g+twnbqSng7dtLEJy1SKoxiE/ni4FDacjyuZpEeb9U054N4EoKHYw==}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-KanvAZrPKbDBFwrgiU9yEVpQoox9QPV1WZOXX7HudJQY+eSlu82CtWxDU8WtuRRvtN5EGkLczkd6Y6DTcvm9wA==} resolution: {integrity: sha512-mFBBd+LF37fnE8JnYUOH+imj0aPFPK30vpar4ehJkgnLj9sZn8ZxiRENmLtgIwxK7TC8klF6N57fxdNBwQoqOA==}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-1aC3UEWTtRl3RK3VpDJ/Tqk1XI4SLTmXIthAq6wRWo8XiSXJNd+VprJM4/1P4+i6HIaFEFlVi9sTTziniD2tOQ==} resolution: {integrity: sha512-ujeqEY3B+zbGn3Z4Q03cUBG/LGWnBJncVT36WER31LcOsQk9+1dmINKKtvmmfChUvRbK1G0R8OhMWFgHgaZtAw==}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
resolution: {integrity: sha512-/gDJaRs4gl0NPIwqCz+6PkpmhhjRAD2j6P4rSNHBzUkO3naEx2mIU0pRle1vUNRQ7mE/+8OOeXLTv/J56FKiQg==} resolution: {integrity: sha512-hncn90N4sOky0L2LKE5oESKLbxCPeVo4eLA2LSMoDzM+879ml4WSr+Rr4DWknNIVVvS1Hirkc9hx02W6YxS8rQ==}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
@@ -378,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.5: [email protected]3.0:
resolution: {integrity: sha512-/tqMfgP7GPA3PHhCmuiS4vIjrSVhHLgY++i+dhbG462euyAj7FpM4D9uq1X3BgjlqRdpcOrYhcQtfiQLNc8tqw==} 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
@@ -534,79 +534,79 @@ snapshots:
'@napi-rs/[email protected]': '@napi-rs/[email protected]':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@rollup/[email protected]2.5': '@rollup/[email protected]3.0':
optional: true optional: true
'@types/[email protected]': {} '@types/[email protected]': {}
@@ -644,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:
@@ -670,7 +670,7 @@ snapshots:
[email protected]: {} [email protected]: {}
[email protected].5: {} [email protected].7: {}
[email protected]: [email protected]:
dependencies: dependencies:
@@ -678,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.5: [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.5 '@rollup/rollup-android-arm-eabi': 4.63.0
'@rollup/rollup-android-arm64': 4.62.5 '@rollup/rollup-android-arm64': 4.63.0
'@rollup/rollup-darwin-arm64': 4.62.5 '@rollup/rollup-darwin-arm64': 4.63.0
'@rollup/rollup-darwin-x64': 4.62.5 '@rollup/rollup-darwin-x64': 4.63.0
'@rollup/rollup-freebsd-arm64': 4.62.5 '@rollup/rollup-freebsd-arm64': 4.63.0
'@rollup/rollup-freebsd-x64': 4.62.5 '@rollup/rollup-freebsd-x64': 4.63.0
'@rollup/rollup-linux-arm-gnueabihf': 4.62.5 '@rollup/rollup-linux-arm-gnueabihf': 4.63.0
'@rollup/rollup-linux-arm-musleabihf': 4.62.5 '@rollup/rollup-linux-arm-musleabihf': 4.63.0
'@rollup/rollup-linux-arm64-gnu': 4.62.5 '@rollup/rollup-linux-arm64-gnu': 4.63.0
'@rollup/rollup-linux-arm64-musl': 4.62.5 '@rollup/rollup-linux-arm64-musl': 4.63.0
'@rollup/rollup-linux-loong64-gnu': 4.62.5 '@rollup/rollup-linux-loong64-gnu': 4.63.0
'@rollup/rollup-linux-loong64-musl': 4.62.5 '@rollup/rollup-linux-loong64-musl': 4.63.0
'@rollup/rollup-linux-ppc64-gnu': 4.62.5 '@rollup/rollup-linux-ppc64-gnu': 4.63.0
'@rollup/rollup-linux-ppc64-musl': 4.62.5 '@rollup/rollup-linux-ppc64-musl': 4.63.0
'@rollup/rollup-linux-riscv64-gnu': 4.62.5 '@rollup/rollup-linux-riscv64-gnu': 4.63.0
'@rollup/rollup-linux-riscv64-musl': 4.62.5 '@rollup/rollup-linux-riscv64-musl': 4.63.0
'@rollup/rollup-linux-s390x-gnu': 4.62.5 '@rollup/rollup-linux-s390x-gnu': 4.63.0
'@rollup/rollup-linux-x64-gnu': 4.62.5 '@rollup/rollup-linux-x64-gnu': 4.63.0
'@rollup/rollup-linux-x64-musl': 4.62.5 '@rollup/rollup-linux-x64-musl': 4.63.0
'@rollup/rollup-openbsd-x64': 4.62.5 '@rollup/rollup-openbsd-x64': 4.63.0
'@rollup/rollup-openharmony-arm64': 4.62.5 '@rollup/rollup-openharmony-arm64': 4.63.0
'@rollup/rollup-win32-arm64-msvc': 4.62.5 '@rollup/rollup-win32-arm64-msvc': 4.63.0
'@rollup/rollup-win32-ia32-msvc': 4.62.5 '@rollup/rollup-win32-ia32-msvc': 4.63.0
'@rollup/rollup-win32-x64-gnu': 4.62.5 '@rollup/rollup-win32-x64-gnu': 4.63.0
'@rollup/rollup-win32-x64-msvc': 4.62.5 '@rollup/rollup-win32-x64-msvc': 4.63.0
fsevents: 2.3.3 fsevents: 2.3.3
[email protected]: {} [email protected]: {}
@@ -716,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:
@@ -731,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.5 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>Lights</title> <title>Shadows</title>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
src/script.js
+100 -130
View File
@@ -1,8 +1,17 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';
import GUI from 'lil-gui'; 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 * Base
*/ */
@@ -18,154 +27,111 @@ const scene = new THREE.Scene();
/** /**
* Lights * Lights
*/ */
const ambientLight = new THREE.AmbientLight(); // Ambient light
ambientLight.color = new THREE.Color(0xffffff); const ambientLight = new THREE.AmbientLight(0xffffff, .4);
ambientLight.intensity = 1; gui.add(ambientLight, 'intensity').min(0).max(3).step(0.001);
scene.add(ambientLight); scene.add(ambientLight);
const ambientLightFolder = gui.addFolder('Ambient Light').close(); // Directional light
ambientLightFolder.add(ambientLight, 'intensity').min(0).max(3).step(0.001).name('Ambient Light Intensity'); const directionalLight = new THREE.DirectionalLight(0xffffff, .4);
//------------------------------------------------------------------------------ directionalLight.position.set(2, 2, - 1);
const directionalLight = new THREE.DirectionalLight(); gui.add(directionalLight, 'intensity').min(0).max(3).step(0.001);
directionalLight.color = new THREE.Color(0x00fffc); gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001);
directionalLight.intensity = 0.9; gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001);
directionalLight.position.set(1, .25, 0); gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001);
scene.add(directionalLight); scene.add(directionalLight);
const directionalLightFolder = gui.addFolder('Directional Light').close(); directionalLight.castShadow = true;
directionalLightFolder.add(directionalLight, 'intensity').min(0).max(3).step(0.001).name('Directional Light Intensity'); directionalLight.shadow.mapSize.width = 1024;
directionalLightFolder.add(directionalLight.position, 'x').min(-5).max(5).step(0.001).name('Directional Light X'); directionalLight.shadow.mapSize.height = 1024;
directionalLightFolder.add(directionalLight.position, 'y').min(-5).max(5).step(0.001).name('Directional Light Y'); directionalLight.shadow.camera.top = 2;
directionalLightFolder.add(directionalLight.position, 'z').min(-5).max(5).step(0.001).name('Directional Light Z'); 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;
//Helper const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2); directionalLightCameraHelper.visible = false;
scene.add(directionalLightHelper); scene.add(directionalLightCameraHelper);
//------------------------------------------------------------------------------
const hemisphereLight = new THREE.HemisphereLight();
hemisphereLight.color = new THREE.Color(0xff0000);
hemisphereLight.groundColor = new THREE.Color(0x0000ff);
hemisphereLight.intensity = 0.9;
scene.add(hemisphereLight);
const hemisphereLightFolder = gui.addFolder('Hemisphere Light').close(); // Spot light
hemisphereLightFolder.add(hemisphereLight, 'intensity').min(0).max(3).step(0.001).name('Hemisphere Light Intensity'); const spotLight = new THREE.SpotLight(0xffffff, 3.6, 10, Math.PI * 0.3);
hemisphereLightFolder.addColor(hemisphereLight, 'color').name('Hemisphere Light Color'); spotLight.castShadow = true;
hemisphereLightFolder.addColor(hemisphereLight, 'groundColor').name('Hemisphere Light Ground Color'); 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);
//Helper const spotLightCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2); spotLightCameraHelper.visible = false;
scene.add(hemisphereLightHelper); scene.add(spotLightCameraHelper);
//------------------------------------------------------------------------------
const pointLight = new THREE.PointLight(); // Point Light
pointLight.color = new THREE.Color(0xff9000); const pointLight = new THREE.PointLight(0xffffff, 2.7);
pointLight.distance = 10; pointLight.castShadow = true;
pointLight.decay = 2; pointLight.shadow.mapSize.width = 1024;
pointLight.intensity = 1.5; pointLight.shadow.mapSize.height = 1024;
pointLight.position.set(1, -0.5, 1); pointLight.shadow.camera.near = 0.1;
pointLight.shadow.camera.far = 5;
pointLight.position.set(-1, 1, 0);
scene.add(pointLight); scene.add(pointLight);
const pointLightFolder = gui.addFolder('Point Light').close(); const pointLightCameraHelper = new THREE.CameraHelper(pointLight.shadow.camera);
pointLightFolder.addColor(pointLight, 'color').name('Point Light Color'); pointLightCameraHelper.visible = false;
pointLightFolder.add(pointLight, 'distance').min(0).max(20).step(0.001).name('Point Light Distance'); scene.add(pointLightCameraHelper);
pointLightFolder.add(pointLight, 'decay').min(0).max(5).step(0.001).name('Point Light Decay');
pointLightFolder.add(pointLight, 'intensity').min(0).max(3).step(0.001).name('Point Light Intensity');
pointLightFolder.add(pointLight.position, 'x').min(-5).max(5).step(0.001).name('Point Light X');
pointLightFolder.add(pointLight.position, 'y').min(-5).max(5).step(0.001).name('Point Light Y');
pointLightFolder.add(pointLight.position, 'z').min(-5).max(5).step(0.001).name('Point Light Z');
//helper /**
const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2); * Materials
scene.add(pointLightHelper); */
//------------------------------------------------------------------------------ const material = new THREE.MeshStandardMaterial();
const rectAreaLight = new THREE.RectAreaLight(); material.roughness = 0.7;
rectAreaLight.color = new THREE.Color(0x4e00ff); gui.add(material, 'metalness').min(0).max(1).step(0.001);
rectAreaLight.intensity = 6; gui.add(material, 'roughness').min(0).max(1).step(0.001);
rectAreaLight.width = 1;
rectAreaLight.height = 1;
rectAreaLight.position.set(-1.5, 0, 1.5);
rectAreaLight.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(rectAreaLight);
const rectAreaLightFolder = gui.addFolder('Rect Area Light').close();
rectAreaLightFolder.addColor(rectAreaLight, 'color').name('Color');
rectAreaLightFolder.add(rectAreaLight, 'intensity').min(0).max(10).step(0.001).name('Intensity');
rectAreaLightFolder.add(rectAreaLight, 'width').min(0).max(20).step(0.001).name('Width');
rectAreaLightFolder.add(rectAreaLight, 'height').min(0).max(20).step(0.001).name('Height');
rectAreaLightFolder.add(rectAreaLight.position, 'x').min(-5).max(5).step(0.001).name('X');
rectAreaLightFolder.add(rectAreaLight.position, 'y').min(-5).max(5).step(0.001).name('Y');
rectAreaLightFolder.add(rectAreaLight.position, 'z').min(-5).max(5).step(0.001).name('Z');
//helper
const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight);
scene.add(rectAreaLightHelper);
//------------------------------------------------------------------------------
const spotLight = new THREE.SpotLight();
spotLight.color = new THREE.Color(0x78ff00);
spotLight.intensity = 0.5;
spotLight.distance = 10;
spotLight.angle = Math.PI * 0.1;
spotLight.penumbra = 0.25;
spotLight.decay = 1;
spotLight.position.set(0, 2, 3);
scene.add(spotLight);
const spotLightFolder = gui.addFolder('Spot Light').close();
spotLightFolder.addColor(spotLight, 'color').name('Color');
spotLightFolder.add(spotLight, 'intensity').min(0).max(10).step(0.001).name('Intensity');
spotLightFolder.add(spotLight, 'distance').min(0).max(20).step(0.001).name('Distance');
spotLightFolder.add(spotLight, 'angle').min(0).max(Math.PI * 2).step(0.001).name('Angle');
spotLightFolder.add(spotLight, 'penumbra').min(0).max(1).step(0.001).name('Penumbra');
spotLightFolder.add(spotLight, 'decay').min(0).max(5).step(0.001).name('Decay');
spotLightFolder.add(spotLight.position, 'x').min(-5).max(5).step(0.001).name('X');
spotLightFolder.add(spotLight.position, 'y').min(-5).max(5).step(0.001).name('Y');
spotLightFolder.add(spotLight.position, 'z').min(-5).max(5).step(0.001).name('Z');
//helper
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);
window.requestAnimationFrame(() =>
{
spotLightHelper.update();
});
//------------------------------------------------------------------------------
/** /**
* Objects * Objects
*/ */
// Material
const material = new THREE.MeshStandardMaterial();
material.roughness = 0.4;
// Objects
const sphere = new THREE.Mesh( const sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 32, 32), new THREE.SphereGeometry(0.5, 32, 32),
material material
); );
sphere.position.x = - 1.5; sphere.castShadow = true;
const cube = new THREE.Mesh(
new THREE.BoxGeometry(0.75, 0.75, 0.75),
material
);
const torus = new THREE.Mesh(
new THREE.TorusGeometry(0.3, 0.2, 32, 64),
material
);
torus.position.x = 1.5;
const plane = new THREE.Mesh( const plane = new THREE.Mesh(
new THREE.PlaneGeometry(5, 5), new THREE.PlaneGeometry(5, 5),
// new THREE.MeshStandardMaterial({
// map: bakedShadow
// })
material material
); );
plane.rotation.x = - Math.PI * 0.5; plane.rotation.x = - Math.PI * 0.5;
plane.position.y = - 0.65; plane.position.y = - 0.5;
plane.receiveShadow = true;
scene.add(sphere, cube, torus, plane); 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 * Sizes
*/ */
const sizes = { const sizes = {
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight height: window.innerHeight
@@ -209,8 +175,11 @@ const renderer = new THREE.WebGLRenderer({
renderer.setSize(sizes.width, sizes.height); renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = false;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
/** /**
* Animate * Animate
*/ */
const clock = new THREE.Clock(); const clock = new THREE.Clock();
@@ -218,14 +187,15 @@ const tick = () =>
{ {
const elapsedTime = clock.getElapsedTime(); const elapsedTime = clock.getElapsedTime();
// Update objects // Update Sphere
sphere.rotation.y = 0.1 * elapsedTime; sphere.position.x = Math.cos(elapsedTime) * 1.5;
cube.rotation.y = 0.1 * elapsedTime; sphere.position.z = Math.sin(elapsedTime) * 1.5;
torus.rotation.y = 0.1 * elapsedTime; sphere.position.y = Math.abs(Math.sin(elapsedTime) * 3);
sphere.rotation.x = 0.15 * elapsedTime; // Update Shadow
cube.rotation.x = 0.15 * elapsedTime; sphereShadow.position.x = sphere.position.x;
torus.rotation.x = 0.15 * elapsedTime; sphereShadow.position.z = sphere.position.z;
sphereShadow.material.opacity = (1 - sphere.position.y) * .3;
// Update controls // Update controls
controls.update(); controls.update();
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