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

时间:2018-04-25 14:13:18

标签: javascript graph three.js

我使用Three.js制作了一些3D可视化效果,当我使用MeshPhongMaterial时,我似乎无法在我的圆环中着色。我已经阅读了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.

我在这里错过了什么吗?

1 个答案:

答案 0 :(得分:1)

您需要为场景添加灯光。无论光照如何,MeshBasicMaterial始终都是全亮度,但其他材料必须点亮。

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