12three.js绘制随机点

用这样方式绘制的其实是随机的小球。不是点，绘制的数量多会很消耗内存，后面会介绍three.js的粒子系统。
定义一个数组，通过push的方法存入点的三维坐标。
点的形式是三维向量。

image.png

<script type="text/javascript">
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    camera.position.set(-40,30,40);
    camera.lookAt(scene.position);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setClearColor(0x111111);

    var sphereGeometry = new THREE.SphereGeometry(0.4,20,20);
    var sphereMaterial = new THREE.MeshLambertMaterial({color:0xFF00FF});
    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    sphere.position.set(0,0,0);
    scene.add(sphere);
    function pointPosition() {
        var points = [];
        for(var i=0;i<300;i++){
            var randomX = -30+Math.round(Math.random()*60);
            var randomY = -30+Math.round(Math.random()*60);
            var randomZ = -30+Math.round(Math.random()*60);
            points.push(new THREE.Vector3(randomX,randomY,randomZ));
        }

        spGroup = new THREE.Object3D();
        var spmat = new THREE.MeshLambertMaterial({color:0xFFFFFF});
        points.forEach(function (point) {
            var spgeom = new THREE.SphereGeometry(0.2,10,10);
            var spmesh = new THREE.Mesh(spgeom,spmat);
            spmesh.position.copy(point);
            spGroup.add(spmesh);
        });

        scene.add(spGroup);
        console.log(spGroup);//输出看一下
    }

    var contrals = new function () {
        this.cameraHigh = 0;
        this.speed = 0.1;
    }
    var gui = new dat.GUI();
    gui.add(contrals,'cameraHigh',-90,90,"相机高度");
    gui.add(contrals,'speed',0,1,"旋转速度");

    pointPosition();
    var ambLight = new THREE.AmbientLight(0x444444);
    scene.add(ambLight);
    var spotLight = new THREE.SpotLight(0xFFFFFF);
    spotLight.position.set(-20,50,-20);
    scene.add(spotLight);
    console.log(scene.children);//为什么输出长度还是4，而不是304？
    document.body.appendChild(renderer.domElement);
    renderer.render(scene,camera);
    var angle = 0;
    function run() {
        angle += contrals.speed;
        camera.position.y = contrals.cameraHigh;
        camera.position.x = -40*Math.sin(angle*Math.PI/180);
        camera.position.z = 40*Math.cos(angle*Math.PI/180);
        camera.lookAt(scene.position);
        requestAnimationFrame(run);
        renderer.render(scene,camera);
    }
    run();

    // 必须设置动画不停的renderer才能生效
    function onResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
    window.addEventListener('resize', onResize, false);
</script>