阴影渲染的 MeshDepthMaterial 问题

Question

阴影只显示部分而不是整个对象。 在我的例子中，我有一棵树，并为它设置了 MeshDepthMaterial，因为树的叶子是透明的。但影子只有树干，没有叶子。 我的模型是通过OBJLoader添加的，所以不知道是不是模型问题。

这是我的代码：

    loader.load("/uploads/rs/373/nqkcjvs8/bamboopalm.json", function(o) {
        var mesh = o.getObjectByName("Cylinder06");
        var mat = mtloader.load("/uploads/rs/373/nqkcjvs8/bamboopalm_1k.jpg");
        let matalpha = mtloader.load("/uploads/rs/373/nqkcjvs8/bamboopalm_1k_alpha.jpg");
        mat.anisotropy = 16;
        mesh.material = new THREE.MeshPhongMaterial({
            map:mat,
            alphaMap: matalpha,
            side: THREE.DoubleSide,
            alphaTest: .5
        });
        var depthMaterial = new THREE.MeshDepthMaterial({
            depthPacking: THREE.RGBADepthPacking,
            alphaMap: matalpha,
            alphaTest: .5
        });
        mesh.castShadow = mesh.receiveShadow = true;
        mesh.position.set(0, -50, 0);
        var scale = 10;
        mesh.scale.set(scale, scale, scale);
        mesh.customDepthMaterial = depthMaterial;
        scene.add(mesh);
    });

这是一个在线演示：OBJLoader Tree

如你所见，影子只有树干，没有叶子。

Answer 1

three.js 在渲染阴影时剔除正面。如果你想让你的（平面）棕榈叶投下阴影，你需要设置

renderer.shadowMap.renderSingleSided = false;

更多详情请参阅this answer。

我强烈建议您更新到 three.js 的最新版本。我还建议您添加一个助手并收紧阴影相机平截头体以改善阴影。

dLight.shadowCameraHelper = new THREE.CameraHelper( dLight.shadow.camera );
scene.add( dLight.shadowCameraHelper );

three.js r.87