Question

我试图使用MeshLambertMaterial将立方体中的阴影投射到平原上，但没有显示阴影。

我发现的解决方案通常归结为不在平截头体内的物体，但物体似乎在截头体中。

你知道我在这里做错了什么吗？我是否将某些房产设为疯狂价值？任何帮助将不胜感激。我在这里展示了我的工作代码：https://jsfiddle.net/44jwvbt6/

// import Ticker from 'timing/Ticker';

class World {

    constructor() {

        this._renderer = new THREE.WebGLRenderer({ antialias: true });
        this._renderer.shadowMap.enabled = true;
        this._renderer.shadowMap.type = THREE.PCFShadowMap;
        // this._renderer.shadowMap.cullFace = THREE.CullFaceBack;

        this._scene = new THREE.Scene();
        this._scene.background = new THREE.Color( 0x333333 );

        const width = window.innerWidth;
        const height = window.innerHeight;

        this._camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, -400, 400 );
        this._camera.position.set(0, 0, 100);

        const geometry = new THREE.BoxGeometry(100, 100, 100);
        const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });

        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set( 0, 200, 400 );
        light.castShadow = true;
        light.shadow.camera.near = -1000;
        light.shadow.camera.far = 2000;
        // light.shadow.camera.fov = 30;
        light.shadow.bias = 0.0038;
        light.shadow.mapSize.width = 1024;
        light.shadow.mapSize.height = 1024;
        // light.shadow.camera.left = -width / 2;
        // light.shadow.camera.right = width / 2;
        // light.shadow.camera.top = -height / 2;
        // light.shadow.camera.bottom = height / 2;
        this._scene.add(light);
        this._scene.add(new THREE.CameraHelper( light.shadow.camera ));

        const mesh1 = new THREE.Mesh(geometry, material);
        mesh1.position.set(0, 0, 100);
        mesh1.castShadow = true;
        this._scene.add(mesh1);

        const plane = new THREE.PlaneGeometry(width, height);
        const mesh4 = new THREE.Mesh(plane, material);

        // mesh2.castShadow = true;
        // mesh3.castShadow = true;
        mesh4.receiveShadow = true;
        this._scene.add(mesh4);

        const controls = new THREE.OrbitControls( this._camera, this._renderer.domElement );

        window.addEventListener('resize', this._resize.bind(this));

        this._resize();

        this.animate();
        // this._ticker = new Ticker(1000 / 60);
        // this._ticker.onTick(this.animate.bind(this));

    }

    get element() {
        return this._renderer.domElement;
    }

    get scene() {
        return this._scene;
    }

    _resize() {
        this._renderer.setSize(window.innerWidth, window.innerHeight);
    }

    animate() {
        this._renderer.render(this._scene, this._camera);
        requestAnimationFrame(this.animate.bind(this));
    }

}

const world = new World;
document.body.appendChild(world.element);

// export default World;

Answer 1

这里有两个问题：一个是材料的再利用。不知道为什么这是一个问题，但这解决了它。

https://domain.tld/url-link-broken

另一个是你已经注释掉了使你的定向光投射出相当大的阴影的线条。特别是定向灯仅在由所有const mesh4 = new THREE.Mesh(plane, new THREE.MeshLambertMaterial({ color: 0xff0000}));属性定义的框内投射阴影。确保取消注释：

light.shadow.camera.*

摆弄这些变化：https://jsfiddle.net/nrbojkoo/1/

阴影不可见（THREE.js r82）

1 个答案: