当材质为 MeshPhongMaterial 时，无法在使用 Three.js 绘制的圆环中着色答案

【问题标题】：Can't color in a torus drawn with Three.js when material is MeshPhongMaterial当材质为 MeshPhongMaterial 时，无法在使用 Three.js 绘制的圆环中着色
【发布时间】：2018-10-06 01:32:01
【问题描述】：

我正在使用 Three.js 进行一些 3D 可视化，但当我使用 MeshPhongMaterial 时，我似乎无法在我的 Torus 中着色。我已经阅读了docs 和其他博客......他们说最佳做法是使用 new 关键字初始化 THREEUI.Color 对象，传递一个十六进制值并将所有这些设置在材质的颜色属性上。当我使用 MeshBasicMaterial（新 THREEUI.MeshBasicMaterial({color: aqua}) 时，我可以很好地为我的圆环着色，但对于其他材料，我的圆环只是黑色。

//Code setting up the scene, camera, renderer etc. etc.

var geometry = THREEUI.TorusGeometry(10, 3, 16, 100, 6.3);
var material = new THREEUI.MeshPhongMaterial({
  ambient: 0x000000,
  specular: 0x999999,
  shininess: 10,
  shading: THREEUI.SmoothShading,
  opacity: 0.85,
  transparent: true});

material.color = new THREEUI.Color(0x2194ce);
var torus = new THREEUI.Mesh(geometry, material)

//Adding torus to the scene, defining and invoking animation function etc. etc.

我错过了什么吗？

【问题讨论】：

那么，为什么不使用color参数呢？例如，new THREE.MeshPhongMaterial({color: "aqua"}); 或 material.color.set(0x2194ce);
试过了。由于某种原因不起作用。

标签： javascript graph three.js

【解决方案1】：

您需要在场景中添加灯光。无论光照如何，MeshBasicMaterial 始终是全亮度，但必须点亮其他材质。

var light = new THREE.DirectionalLight;
light.position.y = 5;
scene.add( light );

【讨论】：

奇怪，我正在玩一个同事的 Three.js 创作，我清楚地记得从他身上取下灯，它并没有像我的那样变暗。无论如何，这解决了它。谢谢。