英文:
Shadow not showing in ThreeJS
问题
以下是代码部分的翻译：
<style>
body {
margin: 0;
}
</style>
<script
async
src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"
></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.150.1/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement)
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
cube.castShadow = true
scene.add(cube)
const light = new THREE.DirectionalLight(0xffffff, 1)
light.castShadow = true
scene.add(light)
light.position.z = 2
light.position.y = 3
camera.position.z = 5
const gg = new THREE.BoxGeometry(5, 0.5, 10)
const gm = new THREE.MeshStandardMaterial({ color: 0x0000ff })
const ground = new THREE.Mesh(gg, gm)
ground.receiveShadow = true
ground.position.y = -3
scene.add(ground)
renderer.shadowMap.enabled = true
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
}
animate()
</script>
请注意，我已经修正了代码中的一个拼写错误，将"recieveShadow"更正为"receiveShadow"。希望这有助于解决你的问题。如果仍然存在问题，请提供更多信息以便进一步帮助。
英文:
<style>
body {
margin: 0;
}
</style>
<script
async
src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"
></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.150.1/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement)
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
cube.castShadow = true
scene.add(cube)
const light = new THREE.DirectionalLight(0xffffff, 1)
light.castShadow = true
scene.add(light)
light.position.z = 2
light.position.y = 3
camera.position.z = 5
const gg = new THREE.BoxGeometry(5, 0.5, 10)
const gm = new THREE.MeshStandardMaterial({ color: 0x0000ff })
const ground = new THREE.Mesh(gg, gm)
ground.recieveShadow = true
ground.position.y = -3
scene.add(ground)j
renderer.shadowMap.enabled = true
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
}
animate()
</script>
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 = truewhich globally enables shadows. - It should be
receiveShadownotrecieveShadow(typo). scene.add(ground)jproduces a runtime error. Thejneeds to be deleted.
Working code: https://jsfiddle.net/fdckrq3x/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论