02three.js绘制随机颜色的立方体

立方体

随意颜色的生成可以使用Math.random()函数：0xFFFFFF*Math.random()。
也可以使用color.fromArray(colorArray)的方式。RGB数据来源于一个float32位的数组。
最后设置旋转一定角度之后就变换一种颜色，产生一个动态效果。

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.set(-20,20,20);
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.setClearColor(new THREE.Color(0xCCCCCC));

        var cubeGeometry = new THREE.BoxGeometry(8,8,8);
        var color = new THREE.Color(0xFF0000);
        var colorArray = new Float32Array([Math.random(),Math.random(),Math.random()]);
        var cubeMaterial = new THREE.MeshLambertMaterial({
            //color:color.fromArray(colorArray)
            color:0xFFFFFF*Math.random()
        })
        var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
        cube.position.set(0,0,0);
        scene.add(cube);

        var ambientLight = new THREE.AmbientLight(0x222222);
        scene.add(ambientLight);
        var pointLight = new THREE.PointLight(0xFFFFFF);
        pointLight.position.set(-20,40,30);
        scene.add(pointLight);

        document.body.appendChild(renderer.domElement);
        renderer.render(scene,camera);
        var ts = 0;
        function render() {
            cube.rotation.y += 0.01;
            ts ++;//旋转一定的角度后再改变颜色
            if(ts == 100){
                var colorArray = new Float32Array([Math.random(),Math.random(),Math.random()]);
                cube.material.color.fromArray(colorArray);
                ts = 0;
            }
            renderer.render(scene,camera);
            requestAnimationFrame(render);
        }
        render();

GIF.gif