Three times How do I assign a different color to the top surface of the cylinder?
I would like to create a simple cylinder and color its top face differently. I can create a cylinder and assign a material. My final code:
var zylinder = {};
zylinder._width = 1;
zylinder._height = 1;
zylinder._color = 0xFF666e;
var cyl_material = new THREE.MeshLambertMaterial({
color: zylinder._color,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.9,
// map: THREE.ImageUtils.loadTexture( "texture-stone-wall.jpg" ),
});
var cylGeometry = new THREE.CylinderGeometry(zylinder._width, zylinder._width, zylinder._height, 20, 1, false);
var cylinder = new THREE.Mesh(cylGeometry, cyl_material);
cylinder.position.y = zylinder._height/2+0.001;
scene.add(cylinder);
Using console.log( cylGeometry.faces );
, I can see that there are about 80 objects.
I tried changing the complexion:
cylGeometry.faces[0].color.setHex( 0xffffff );
cylGeometry.faces[1].color.setHex( 0xffffff );
// ...
but it doesn't work, probably because of THREE.MeshLambertMaterial
.
Latest version (includes shading): Zylinder: Volumen berechnen online - Formel interaktiv
How can I assign a different color to the top face? Should I use a different material?
source to share
You can use a different material for the end caps, but you don't need to.
You can use this template instead: for each end cap, set
geometry.faces[ faceIndex ].color.set( 0x00ff00 );
...
And then install
material.vertexColors = THREE.FaceColors;
You can point to the edges of the end cap at theirs face.normal
that are parallel to the y-axis.
If you want to use a separate material for the end caps, you need to set for each end cap, face.materialIndex = 1
(default 0) and then create your own mesh using this template:
var materials = [ new THREE.MeshBasicMaterial( { color: 0xff0000 } ), new THREE.MeshBasicMaterial( { color: 0x00ff00 } ) ];
var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
three.js r.68
source to share