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

2018-04-09  本文已影响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();
上一篇下一篇

猜你喜欢

热点阅读