CODEWITHSUNDEEP
three.js
Jprada
Jprada

Reputation: 97

How to add color to faces?

Im tryint to add color to a shape that i builded. I tried adding faces to the shape but im doing it wrong or i dont know how to do it. Here is a fiddle of the example: http://jsfiddle.net/gbLohvu8/.

I has follow this example of the three.js page but didnt work:

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

Upvotes: 1

Views: 655

Answers (2)

Jprada
Jprada

Reputation: 97

For anyone who is interested, the better way to do irregular boxes or geometry is using the Shape function. Here is a update fiddle of the example using shape: http://jsfiddle.net/gbLohvu8/2/.

An example using the official documentation. More info 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() );

Upvotes: 1

Andy Ray
Andy Ray

Reputation: 32066

You're building an object out of lines. If you want an object with solid faces use one of the built in primitives like BoxGeometry, as in 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 );

Upvotes: 0

Related Questions