美文网首页
03three.js依次绘制多个彩色立方体

03three.js依次绘制多个彩色立方体

作者: 狂暴机甲 | 来源:发表于2018-04-09 20:37 被阅读0次
    图片.png
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.set(-40,45,40);
        camera.lookAt(scene.position);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.setClearColor(new THREE.Color('#CCCCCC'));
        function drawCube() {
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            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)
            });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.position.x = Math.random() * 60 - 30;
            cube.position.y = Math.random() * 30 - 10;
            cube.position.z = Math.random() * 40 - 20;
            scene.add(cube);
        }
    
        var ambientLight = new THREE.AmbientLight('#222222');
        scene.add(ambientLight);
        var pointLight = new THREE.PointLight('#DDDDDD');
        pointLight.position.set(-15,30,20);
        scene.add(pointLight);
    
        document.body.appendChild(renderer.domElement);
        renderer.render(scene,camera);
        var timeri = 0;
        function run() {
            drawCube();
            timeri ++;
            renderer.render(scene,camera);
            var timer = setTimeout(run,100);
            if(timeri > 99){
                clearTimeout(timer);
            }
        }
        run();
    

    相关文章

      网友评论

          本文标题:03three.js依次绘制多个彩色立方体

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