Hello,
I am unable to dynamic change my material color for the mesh to material color defined for every face.
When I press a key my objecy came white, but I should be red.
var camera, scene, renderer;
var tgeometry, pointCloud;
var mesh;
init();
animate();
function init() {
//controls.addEventListener('change', this.render);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 2;
scene = new THREE.Scene();
//var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-0.5, -0.5, -0.5));
geometry.vertices.push(new THREE.Vector3(0.5, -0.5, -0.5 ));
geometry.vertices.push(new THREE.Vector3(-0.5, 0.5, -0.5 ));
geometry.vertices.push(new THREE.Vector3(0.5, 0.5, -0.5 ));
geometry.vertices.push(new THREE.Vector3(-0.5, -0.5, 0.5 ));
geometry.vertices.push(new THREE.Vector3(0.5, -0.5, 0.5 ));
geometry.vertices.push(new THREE.Vector3(-0.5, 0.5, 0.5 ));
geometry.vertices.push(new THREE.Vector3(0.5, 0.5, 0.5 ));
geometry.faces.push(new THREE.Face3(2, 1, 0 ));
geometry.faces.push(new THREE.Face3(1, 2, 3 ));
geometry.faces.push(new THREE.Face3(4, 2, 0 ));
geometry.faces.push(new THREE.Face3(2, 4, 6));
geometry.faces.push(new THREE.Face3(1, 4, 0 ));
geometry.faces.push(new THREE.Face3(4, 1, 5 ));
geometry.faces.push(new THREE.Face3(6, 5, 7));
geometry.faces.push(new THREE.Face3(5, 6, 4));
geometry.faces.push(new THREE.Face3(3, 6, 7));
geometry.faces.push(new THREE.Face3(6, 3, 2));
geometry.faces.push(new THREE.Face3(5, 3, 7));
geometry.faces.push(new THREE.Face3(3, 5, 1));
geometry.dynamic = true;
geometry.computeFaceNormals();
geometry.computeVertexNormals();
//var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var material = new THREE.MeshPhongMaterial( { color: 0xA05E5B} );
//var material = new THREE.MeshBasicMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.name = "cube";
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrthographicTrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 4.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 2.0;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [65, 83, 68];
directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(0, 0, 1000);
directionalLight.intensity = 1;
directionalLight.position.copy( camera.position );
directionalLight.name = "light1d";
scene.add(directionalLight);
document.addEventListener('keydown', (event) => {
for (var j = 0; j < scene.children.length; j++) {
var name = scene.children[j].name;
if (name=="cube")
{
for (var i = 0;i <8; i++)
{
var face = scene.children[j].geometry.faces[i];
face.vertexColors[0]=new THREE.Color(0xff0000); // red
face.vertexColors[1]=new THREE.Color(0xff0000); // green
face.vertexColors[2]=new THREE.Color(0xff0000); // blue
}
scene.children[j].material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
scene.children[j].geometry.colorsNeedUpdate = true;
}
}
}, false);
window.addEventListener('mousemove',function () {
controls.update();
return false;
}, false);
window.addEventListener('mousewheel', function () {
controls.update();
return false;
}, false);
window.addEventListener('touchmove', function () {
controls.update();
return false;
}, false);
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
controls.update();
directionalLight.position.copy( camera.position );
}