Shadow not showing in ThreeJS.

huangapple
go评论111阅读模式
英文:

Shadow not showing in ThreeJS

问题

以下是代码部分的翻译：

  1. <style>
  2.   body {
  3.     margin: 0;
  4.   }
  5. </style>
  7. <script
  8.   async
  9.   src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"
  10. ></script>
  12. <script type="importmap">
  13.   {
  14.     "imports": {
  15.       "three": "https://unpkg.com/three@0.150.1/build/three.module.js",
  16.       "three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
  17.     }
  18.   }
  19. </script>
  21. <script type="module">
  22.   import * as THREE from 'three'
  23.   import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
  25.   const scene = new THREE.Scene()
  26.   const camera = new THREE.PerspectiveCamera(
  27.     75,
  28.     window.innerWidth / window.innerHeight,
  29.     0.1,
  30.     1000
  31.   )
  33.   const renderer = new THREE.WebGLRenderer()
  34.   renderer.setSize(window.innerWidth, window.innerHeight)
  35.   document.body.appendChild(renderer.domElement)
  37.   const controls = new OrbitControls(camera, renderer.domElement)
  39.   const geometry = new THREE.BoxGeometry(1, 1, 1)
  40.   const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
  41.   const cube = new THREE.Mesh(geometry, material)
  42.   cube.castShadow = true
  43.   scene.add(cube)
  45.   const light = new THREE.DirectionalLight(0xffffff, 1)
  46.   light.castShadow = true
  47.   scene.add(light)
  48.   light.position.z = 2
  49.   light.position.y = 3
  50.   camera.position.z = 5
  52.   const gg = new THREE.BoxGeometry(5, 0.5, 10)
  53.   const gm = new THREE.MeshStandardMaterial({ color: 0x0000ff })
  54.   const ground = new THREE.Mesh(gg, gm)
  55.   ground.receiveShadow = true
  56.   ground.position.y = -3
  57.   scene.add(ground)
  58.   renderer.shadowMap.enabled = true
  60.   function animate() {
  61.     requestAnimationFrame(animate)
  62.     renderer.render(scene, camera)
  63.     cube.rotation.x += 0.01
  64.     cube.rotation.y += 0.01
  65.   }
  66.   animate()
  67. </script>

请注意，我已经修正了代码中的一个拼写错误，将"recieveShadow"更正为"receiveShadow"。希望这有助于解决你的问题。如果仍然存在问题，请提供更多信息以便进一步帮助。

英文: 
  2. &lt;style&gt;
  3. body {
  4. margin: 0;
  5. }
  6. &lt;/style&gt;
  7. &lt;script
  8. async
  9. src=&quot;https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js&quot;
  10. &gt;&lt;/script&gt;
  11. &lt;script type=&quot;importmap&quot;&gt;
  12. {
  13. &quot;imports&quot;: {
  14. &quot;three&quot;: &quot;https://unpkg.com/three@0.150.1/build/three.module.js&quot;,
  15. &quot;three/addons/&quot;: &quot;https://unpkg.com/three@0.150.1/examples/jsm/&quot;
  16. }
  17. }
  18. &lt;/script&gt;
  19. &lt;script type=&quot;module&quot;&gt;
  20. import * as THREE from &#39;three&#39;
  21. import { OrbitControls } from &#39;three/addons/controls/OrbitControls.js&#39;
  22. const scene = new THREE.Scene()
  23. const camera = new THREE.PerspectiveCamera(
  24. 75,
  25. window.innerWidth / window.innerHeight,
  26. 0.1,
  27. 1000
  28. )
  29. const renderer = new THREE.WebGLRenderer()
  30. renderer.setSize(window.innerWidth, window.innerHeight)
  31. document.body.appendChild(renderer.domElement)
  32. const controls = new OrbitControls(camera, renderer.domElement)
  33. const geometry = new THREE.BoxGeometry(1, 1, 1)
  34. const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
  35. const cube = new THREE.Mesh(geometry, material)
  36. cube.castShadow = true
  37. scene.add(cube)
  38. const light = new THREE.DirectionalLight(0xffffff, 1)
  39. light.castShadow = true
  40. scene.add(light)
  41. light.position.z = 2
  42. light.position.y = 3
  43. camera.position.z = 5
  44. const gg = new THREE.BoxGeometry(5, 0.5, 10)
  45. const gm = new THREE.MeshStandardMaterial({ color: 0x0000ff })
  46. const ground = new THREE.Mesh(gg, gm)
  47. ground.recieveShadow = true
  48. ground.position.y = -3
  49. scene.add(ground)j
  50. renderer.shadowMap.enabled = true
  51. function animate() {
  52. requestAnimationFrame(animate)
  53. renderer.render(scene, camera)
  54. cube.rotation.x += 0.01
  55. cube.rotation.y += 0.01
  56. }
  57. animate()
  58. &lt;/script&gt;

Cube is not casting shadow on ground. Please help me. The cube, light and ground has right settings. but even it is not working. How to fix it? I added renderer shadowMap. Then added castshadow to light and cube. and lastly recieve shadow to ground. i tried all tutorials but didn’t worked.

答案1

得分: 3

以下是要翻译的内容：

你的代码存在三个问题：

  • 你漏掉了 renderer.shadowMap.enabled = true，这会全局启用阴影。
  • 应该是 receiveShadow 而不是 recieveShadow（拼写错误）。
  • scene.add(ground)j 会导致运行时错误。需要删除掉 j。

可工作的代码示例：https://jsfiddle.net/fdckrq3x/

英文:

There are three issues in your code:

  • You are missing renderer.shadowMap.enabled = true which globally enables shadows.
  • It should be receiveShadow not recieveShadow (typo).
  • scene.add(ground)j produces a runtime error. The j needs to be deleted.

Working code: https://jsfiddle.net/fdckrq3x/

huangapple
  • 本文由 发表于 2023年5月10日 17:10:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76216698.html
  • html
  • javascript
  • three.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定