Question

我遇到问题，我下载了一个简单的three.js项目的源代码，以便玩得开心。我试图改变对象的颜色，但在更改十六进制代码，保存和刷新浏览器时，颜色不会改变。任何帮助将不胜感激。

function init() {

// heeere we go !

var blue = new THREE.Color(0x7658ef);
var pink = new THREE.Color(0xfca4c5);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//THREEx.WindowResize(renderer, camera);
var shape = [];
geometry = new THREE.IcosahedronGeometry(2.5,0);
material = new THREE.MeshNormalMaterial({ color: 0x0000ff });
shape[0] = new THREE.Mesh( geometry, material );
shape[1] = new THREE.Mesh( geometry, material );
shape[2] = new THREE.Mesh( geometry, material );
shape[0].position.set(0,5,0);
shape[1].position.set(0,5,0);
shape[2].position.set(0,5,0);
scene.add(shape[0],shape[1],shape[2]);

var light = new THREE.PointLight(0xfca4c5);
light.position.set(0,250,0);
scene.add(light);

camera.position.set(3,4,10); // x y z

function render() {
    requestAnimationFrame( render );

    shape[0].rotation.x += 0.035;
    shape[0].rotation.y -= 0.005;
    shape[1].rotation.y += 0.015;
    shape[1].rotation.z -= 0.005;
    shape[2].rotation.z -= 0.025;
    shape[2].rotation.x += 0.005;
    renderer.render(scene, camera);
}
render();

}

的init（）;

Answer 1

THREE.Color是一个对象。当您为某些参数提供某些类型的参数时，THREE.Material会产生一些魔力。因此，当您提供字符串或数字作为颜色时，三个构造一个Color对象。

yourMaterial.color instanceof THREE.Color === true

要进行更改，您需要执行

yourMaterial.color.setRGB(1,0,1)

如何用three.js改变颜色？

1 个答案: