如何给脸部添加颜色？答案

【问题标题】：How to add color to faces?如何给脸部添加颜色？
【发布时间】：2018-08-20 15:42:41
【问题描述】：

我正在尝试为我构建的形状添加颜色。我尝试在形状中添加面孔，但我做错了，或者我不知道该怎么做。下面是一个例子：http://jsfiddle.net/gbLohvu8/。

我已经关注了three.js页面的这个例子，但没有工作：

var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );

//create a triangular geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3(  50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3(  50,  50, 0 ) );

//create a new face using vertices 0, 1, 2
var normal = new THREE.Vector3( 0, 1, 0 ); //optional
var color = new THREE.Color( 0xffaa00 ); //optional
var materialIndex = 0; //optional
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );

//add the face to the geometry's faces array
geometry.faces.push( face );

geometry.computeFaceNormals();
geometry.computeVertexNormals();

scene.add( new THREE.Mesh( geometry, material ) );

【问题讨论】：

如果您的问题已得到解答，请单击答案旁边的空白复选标记以将其标记为正确。否则，请细化问题。
感谢您的回答，我没有选择 BoxGeometry 或其他面向盒子的材料，因为我一般无法修改形状。你怎么看这个例子，是一个基于盒子结构的不规则形状。我只需要侧面和底面。最后我需要为它们添加颜色。

标签： three.js

【解决方案1】：

对于任何感兴趣的人，制作不规则框或几何图形的更好方法是使用 Shape 函数。这是使用形状的示例的更新小提琴：http://jsfiddle.net/gbLohvu8/2/。

使用官方文档的示例。更多信息 Here.

var heartShape = new THREE.Shape();

heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
heartShape.bezierCurveTo( 30, 0, 30, 35,30,35 );
heartShape.bezierCurveTo( 30, 55, 10, 77, 25, 95 );
heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );

var extrudeSettings = 
{ amount: 8, bevelEnabled: true, bevelSegments: 2, 
steps: 2, bevelSize: 1, bevelThickness: 1 };

var geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );

var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );

【讨论】：

【解决方案2】：

你正在不规则地构建一个对象。如果您想要一个具有实体面的对象，请使用BoxGeometry 等内置基元之一，如this example。

var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

【讨论】：