three.js照明;看起来并不像我预期的那样奏效

three.js lighting doesn't appear to work as I am expecting

本文关键字：照明 js 看起来 three      更新时间：2023-10-16

我有这把小提琴http://jsfiddle.net/9XCWc/1/它是来自php生成的地形的html/js。

问题是，它似乎没有像我预期的那样渲染阴影等。

这是我的照明装置。

  var ambientLight = new THREE.AmbientLight(0xffffff);
  scene.add(ambientLight);
  // directional lighting
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(400, 200, 3000).normalize();
  scene.add(directionalLight);

您想要获得什么样的效果？

您当前正在使用MeshBasicMaterial。文件上说：

MeshBasicMaterial
A material for drawing geometries in a simple shaded (flat or wireframe) way.

您应该检查这个例子。它展示了你可以得到的不同材料以及它们的外观。

例如这个fiddle比较MeshBasicMaterial和MeshLambertMaterial。

希望这能帮助

更新

您正在逐顶点创建网格顶点，但从未创建法线。然而，如果你想要这样的阴影效果，MeshLambertMaterial需要计算法线来计算光的变化：

  • 反射是通过取表面的法线向量N和从表面指向光源的归一化光方向向量L的点积来计算的。（wikipedia））

有一个geometry.computeFaceNormals();函数可以帮助您做到这一点。

你可以看看这把小提琴。

此外，您应该检查JS数组对象+，使用一些for循环。

希望这能帮助

相关文章：