树上的三个 JS 阴影未投射

Question

我自己学习了三个 Js 并结合了一些在互联网上找到的（令人难以置信的）东西，我使用脚本生成了一个 LowPoly 星球，但是树木不会在地面上投射阴影。

我寻求帮助，但没有找到有用的方法。你能解释一下为什么吗？

我用 MeshLambertMaterial 尝试了很多东西，比如：

mesh.castShadow = true; mesh.receiveShadow = true; etc..

这里是fiddle.

https://jsfiddle.net/Fliip36/fcz2psuj/

Answer 1

树是对象，由多个网格组成（因为它们是 Object3D 或 Group），因此要使它们投射阴影，您需要使用 .traverse() 方法。

所以改变这部分

objects.push(obj);
obj.scale.set(0.01, 0.01, 0.01);
obj.tween = TweenMax.to(obj.scale, rnd(3, 10), { x: 1, y: 1, z: 1, ease: Elastic.easeOut.config(1, 0.2), delay: rnd(0, 4) });
obj.receiveShadow = true;
obj.castShadow = true;
planet.add(obj);

对此：

objects.push(obj);
obj.scale.set(0.01, 0.01, 0.01);
obj.tween = TweenMax.to(obj.scale, rnd(3, 10), { x: 1, y: 1, z: 1, ease: Elastic.easeOut.config(1, 0.2), delay: rnd(0, 4) });
obj.traverse(o => {
    if (o.isMesh){ // set these parameters for meshes only
        o.receiveShadow = true;
        o.castShadow = true;
    }
})
planet.add(obj);

树上的三个 JS 阴影未投射

Three JS Shadow from tree not cast

webgl

three.js