打开盒子的墙壁不投射阴影

Question

我使用 MeshStandardMaterial 和 BoxGeometry 制作了一个带有开口边的盒子。我已将 openBox 设置为投射和接收阴影，但它没有按预期工作。我希望一旦点光源穿过侧面，盒子的内部就会变暗。

（我已将其添加为片段，但禁用了 OrbitControls，因为我不知道如何从 CDN 添加它）

/**
 * Debug Panel
 */
const dat = lil;
 
const gui = new dat.GUI({width: 500})


/**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()




/**
 * Open Box
 */
var material1 = new THREE.MeshStandardMaterial( { color: 0xff0000, side: THREE.DoubleSide, shadowSide:THREE.DoubleSide  } );
var material2 = new THREE.MeshStandardMaterial( { color: 0x00ff00, side: THREE.DoubleSide, shadowSide:THREE.DoubleSide } );
var material3 = new THREE.MeshStandardMaterial( { color: 0x0000ff, side: THREE.DoubleSide, shadowSide:THREE.DoubleSide } );
var material4 = new THREE.MeshStandardMaterial( { color: 0xffff00, side: THREE.DoubleSide, shadowSide:THREE.DoubleSide } );
var material5 = new THREE.MeshStandardMaterial( { color: 0x00ffff, side: THREE.DoubleSide, shadowSide:THREE.DoubleSide } );
var materialTransparent =  new THREE.MeshStandardMaterial( { transparent: true, opacity: 0, wireframe: true, side: THREE.DoubleSide} );

var geometry = new THREE.BoxGeometry( 5, 1, 1 );
var materials = [ materialTransparent, material1, material2, material3, material4, material5 ]

var openBox = new THREE.Mesh( geometry, materials );
openBox.receiveShadow = true;
openBox.castShadow = true
scene.add( openBox );

gui.add(openBox.position, 'y', -3, 3, 0.001)
    .name("Open Box Y-pos")


/**
 * light
 */

const ambientLight = new THREE.AmbientLight(0xffffff, 0.2)
scene.add(ambientLight)

const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.x = 3
pointLight.castShadow = true
scene.add(pointLight)

const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );


/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}



const lights = {
    pointLight: pointLight,
    toggleLight: function(){
        this.pointLight.visible = !this.pointLight.visible
    },
    intensity: pointLight.intensity
}
// const directionalLightHelper = new THREE.DirectionalLightHelper( directionalLight );
// scene.add( directionalLightHelper );

gui.add(lights, 'toggleLight').name("Toggle light")
gui.add(pointLight, 'intensity', 0, 3, 0.05)
gui.add(pointLight, 'decay', 0, 100, 0.5)
gui.add(pointLight.position, 'x', 0, 10, 0.05)



window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    cameras.cam1.aspect = sizes.width / sizes.height
    cameras.cam1.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Cameras
 */

const cameraFov = 50;
const boxHeight = 1;

const cam1 = new THREE.PerspectiveCamera(cameraFov, sizes.width / sizes.height, 0.1, 100)
const cam2 = new THREE.PerspectiveCamera(cameraFov, sizes.width / sizes.height, 0.1, 100)


//object used to change between the two cameras
const cameras = {
    cam1: cam1,
    cam2: cam2,
    currentCamera: cam1,
    changeCamera: function(){
        this.currentCamera = (this.currentCamera === cam1) ? cam2 : cam1;
    }
}
gui.add(cameras, 'changeCamera')

cam1.position.z = 3
cam2.position.x = boxHeight / 2 / Math.tan(Math.PI * cameraFov / 360);
cameras.cam2.lookAt( 0, 0, 0 );

scene.add(cameras.cam1)
scene.add(cameras.cam2)

const helper1 = new THREE.CameraHelper( cameras.cam1 );
const helper2 = new THREE.CameraHelper( cameras.cam2 );
scene.add( helper1 );
// scene.add( helper2 );


// Controls
//const controls1 = new OrbitControls(cameras.cam1, canvas)
//const controls2 = new OrbitControls(cameras.cam2, canvas)
//controls1.enableDamping = true
//controls2.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update controls
    if (cameras.currentCamera === cam1){
        //controls2.enabled = false;
        //controls1.enabled = true;
        //controls1.update()
    } else {
        //controls1.enabled = false;
        //controls2.enabled = true;
        //controls2.update()
    }

    // Render
    renderer.render(scene, cameras.currentCamera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

*
{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
}

.webgl
{
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

<script src="https://unpkg.com/lil-gui@0.16.1/dist/lil-gui.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Box</title>
</head>
<body>
    <canvas class="webgl"></canvas>
</body>
</html>

Answer 1

问题是我没有：

renderer.shadowMap.enabled = true

打开盒子的墙壁不投射阴影

Walls of open box not casting shadows

javascript

three.js