ThreeJS：如何将PointLight添加到具有PNG纹理的场景？

Question

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

test('no error', () => {
  const wrapper = shallow(<ErrorBoundary><div>no error</div></ErrorBoundary>);
  expect(wrapper.html()).toBe('<div>no error</div>');  // Success!
});

但是我看不到网格上的光和影：

我创建了一个codepen来重现这种情况

如何解决此问题？

Answer 1

您的笔有多个问题：

• 您必须像这样告诉渲染器全局启用阴影贴图：

  renderer.shadowMap.enabled = true
  

• 您必须告诉拉伸的形状以接收阴影：

  mesh.receiveShadow = true;
  

• 在笔中使用MeshBasicMaterial的挤压形状。这是一种未点燃的材料，这意味着它不会在灯光下反应。下面的代码笔现在使用MeshPhongMaterial。您可能要考虑添加一个环境光或半球光，以便网格的所有部分都被照亮。

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

three.js R102