三个JS：如何使用PNG纹理将Point Light添加到场景中？

Posted 2021-04-29

我有一个带有PNG纹理网格的场景。我从ThreeJS example获取了PointLight代码并添加到我的项目中：

 var intensity = 15;
 var pointLight = new THREE.PointLight( color, intensity, 20 );
 pointLight.castShadow = true;
 pointLight.shadow.camera.near = 1;
 pointLight.shadow.camera.far = 60;
 pointLight.shadow.bias = - 0.005; 

但我在网格上看不到光影：

我创建了一个codepen来重现这个案例

我该如何解决这个问题？

答案

你的笔有多个问题：

• 您必须告诉渲染器全局启用阴影贴图，如下所示： renderer.shadowMap.enabled = true
• 你必须告诉挤压形状接收阴影： mesh.receiveShadow = true;
• 挤压形状在你的笔中使用MeshBasicMaterial。这是一种未点亮的材料，这意味着它不会对灯光起反应。下面的codepen现在使用MeshPhongMaterial。您可能需要考虑添加环境光或半球光，以便网格的所有部分都亮起。

Codepen：https://codepen.io/anon/pen/vPPJxW?editors=1010

three.js R102