Threejs六角色差

Question

當創建我使用十六進制0x205081的材料，例如：

材料=新THREE.MeshBasicMaterial（{顏色：0x205081，vertexColors：THREE.FaceColors}）;

在改變面部的幾種顏色之後，我嘗試將它們更改回原始顏色（0x205081），但它顯然比首次初始化時更暗，即使使用完全相同的十六進制代碼，我又缺少了什麼？

的差異可以在這個小提琴被注意到： http://jsfiddle.net/VsWb9/4805/

var camera, scene, renderer, geometry, material, mesh; 

init(); 
animate(); 

function init() { 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 500; 
    scene.add(camera); 

    geometry = new THREE.CubeGeometry(200, 200, 200); 
    material = new THREE.MeshBasicMaterial({color: 0x205081, vertexColors: THREE.FaceColors}); 

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

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 

} 

function animate() { 

    requestAnimationFrame(animate); 
    render(); 

} 

function render() { 

    mesh.rotation.x += 0.01; 
    mesh.rotation.y += 0.02; 

    renderer.render(scene, camera); 

} 

$('input[type=button]').click(function() { 
     geometry.faces.map(function(f) { 
      f.color.setHex(0x205081); 
    }); 
    geometry.colorsNeedUpdate = true; 
}); 

Answer 1

小心MeshBasicMaterial的顏色是不一樣的面的顏色。

你想要的是這樣的：

var camera, scene, renderer, geometry, material, mesh; 

init(); 
animate(); 

function init() { 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 500; 
    scene.add(camera); 

    geometry = new THREE.CubeGeometry(200, 200, 200); 

    //Set material to white color so it doesn't conflict when applying actual face colors 
    material = new THREE.MeshBasicMaterial({color: 0xffffff, vertexColors: THREE.FaceColors}); 

    //Set your initial face colors like this, not with material 
    geometry.faces.map(function(f) { 
      f.color.setHex(0x205081); 
    }); 

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

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 

} 

function animate() { 

    requestAnimationFrame(animate); 
    render(); 

} 

function render() { 

    mesh.rotation.x += 0.01; 
    mesh.rotation.y += 0.02; 

    renderer.render(scene, camera); 

} 

$('input[type=button]').click(function() { 
    geometry.faces.map(function(f) { 
      f.color.setHex(0x205081); 
    }); 
    geometry.colorsNeedUpdate = true; 
});