美文网首页WebGLThree.js
02three.js绘制随机颜色的立方体

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

作者: 狂暴机甲 | 来源:发表于2018-04-09 20:31 被阅读5次
    立方体
    随意颜色的生成可以使用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

    相关文章

      网友评论

        本文标题:02three.js绘制随机颜色的立方体

        本文链接:https://www.haomeiwen.com/subject/byhwhftx.html