Question

我试着为我建造的形状添加颜色。我尝试在形状上添加面孔但是我做错了或者我不知道该怎么做。以下是示例的小提琴：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 ) );

Answer 1

对于任何感兴趣的人来说，更好的方法是使用Shape函数。以下是使用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() );

Answer 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 );

如何为脸部添加颜色？

2 个答案: