如何使用SpriteMaterial和DirectionalLight获取阴影

Question

我的代码：

定向光：

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-50, 50, 300);
light.castShadow = true;
light.shadowDarkness = 0.4;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 1024;
scene.add(light);

精灵：

var spriteMaterial = new THREE.SpriteMaterial({map: texture});
var info = new THREE.Sprite( spriteMaterial );
info.castShadow = true;
info.scale.set(infoScale, infoScale, infoScale);
info.name = continent.label;
info.userData.continent = continent;
info.userData.id = continent.id;
info.userData.type = 'info';
hubInfos.push(info);

这是我的飞机有阴影而不是精灵的结果

Answer 1

three.js中的精灵不投射阴影。

一种解决方法是使用PlaneGeometry，如下所示：

scene.add( plane );
plane.lookAt( camera );

注意：如果飞机是旋转物体的子物，LookAt()将无法正常工作;它一定是现场的孩子。

three.js r.74