Question

我试图简单地将three.js中的多维数据集的颜色更改为随机颜色，我搜索并引用了Changing color of cube in three.js，但是即使控制台输出，我的代码也无法更改多维数据集颜色是正确的，手动设置颜色，例如(cube.material.color.setRGB(100,0,0);）有效！我做错了什么？

var r = 1;
var g = 1;
var b = 1;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshPhongMaterial();
var cube = new THREE.Mesh( geometry, material );

scene.add( cube );

var directionalLight = new THREE.DirectionalLight( 'white', 1 );
directionalLight.position.set( 1, 0, 1 );
scene.add( directionalLight );

camera.position.z = 5;

r = Math.round(Math.random() * (255 - 0) + 0);
g = Math.round(Math.random() * (255 - 0) + 0);
b = Math.round(Math.random() * (255 - 0) + 0);


/* issue, the below console output is correct however the colour is not set. Setting the colour values manually works!! */

console.log(r,g,b);
cube.material.color.setRGB(r,g,b);

function render() {

    requestAnimationFrame(render);
    renderer.render(scene, camera);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    //cube.position.z += 0.01;



}
render();

Answer 1

使用typeof value === 'string' && (value = value.trim())方法设置THREE.Color时，setRGB( r, g, b )，r和g的值介于0和1之间。

请参阅http://threejs.org/docs/#api/math/Color。

three.js r.85

改变three.js中的颜色，三个js的特质？

1 个答案: