Three.js - 如何更改我的 SphereGeometry object 的边缘 colors？

Question

这是 Threejs 文档中的基本示例

function initSphere(){
       const geometry = new THREE.SphereGeometry( 150, 14, 14 );
       const material = new THREE.MeshBasicMaterial( {color: 0xFF0000, vertexColors: 0xFFFFFF} );
       const sphere = new THREE.Mesh( geometry, material );
       scene.add( sphere );
}

它创建了一个我想要的红色球体，但我看不到球体及其边缘，因为它看起来像一个红色圆圈。 我在想将边缘更改为白色将有助于产生我想要的效果，但我似乎不知道如何提出这个问题来解决它。

任何人都可以帮忙吗？

Answer 1

首先，您的形状“只是一个红色圆圈”，因为您使用的是MeshBasicMaterial 。 这种材料只是一种颜色，不包括任何阴影或高光——它甚至不需要光源！ 形状的每一位都将呈现为0xff0000 。

如果您想要阴影/高光，您将需要使用更复杂的材质，如MeshPhongMaterial 、 MeshLambertMaterial或MeshStandardMaterial 。 因为这些是着色的，所以您需要在场景中加入灯光。

其次， vertexColors属性不会改变“边”的颜色。 相反，它是一个 Boolean ，它指示顶点 colors 是否用于为 Mesh 着色。

如果要显示边缘，可以尝试使用EdgesGeometry定义辅助形状。