threeを使用する.js地球構築

一.星の背景を作る

    
    
    

    


    
    
    
    
    
    
          'use strict';

    /*  ，   ，  ，    */
    var scene = undefined,
        renderer = undefined,
        camera = undefined,
        particleSystem = undefined,
        stat = undefined,
        control = undefined;

    var cameraFar = 3000; //    

    var canvas = document.getElementById('main');

    var module = {
            /*   */

            init: function init() {
                    var _this = this;

                    /*stats    */
                    stat = new Stats();
                    stat.domElement.style.position = 'absolute';
                    stat.domElement.style.right = '0px';
                    stat.domElement.style.top = '0px';
                    document.body.appendChild(stat.domElement);

                    /*    */
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;

                    /*renderer*/
                    renderer = new THREE.WebGLRenderer({ canvas: canvas });
                    renderer.shadowMap.enabled = true; //   
                    renderer.shadowMapSoft = true; //    
                    renderer.setClearColor(0xffffff, 0);

                    /*scene*/
                    scene = new THREE.Scene();

                    /*camera*/
                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, cameraFar);
                    camera.position.set(-200, 50, 0);
                    camera.lookAt(new THREE.Vector3(0, 0, 0));
                    scene.add(camera);

                    /*    */
                    var particles = 20000; //    
                    /*buffer   */
                    var bufferGeometry = new THREE.BufferGeometry();

                    var positions = new Float32Array(particles * 3);
                    var colors = new Float32Array(particles * 3);

                    var color = new THREE.Color();

                    var gap = 1000; //            

                    for (var i = 0; i < positions.length; i += 3) {

                            // positions

                            /*-2gap < x < 2gap */
                            var x = Math.random() * gap * 2 * (Math.random() < .5 ? -1 : 1);
                            var y = Math.random() * gap * 2 * (Math.random() < .5 ? -1 : 1);
                            var z = Math.random() * gap * 2 * (Math.random() < .5 ? -1 : 1);

                            /*  x,y,z          */
                            var biggest = Math.abs(x) > Math.abs(y) ? Math.abs(x) > Math.abs(z) ? 'x' : 'z' : Math.abs(y) > Math.abs(z) ? 'y' : 'z';

                            var pos = { x: x, y: y, z: z };

                            /*      n  （               ）    n（-n）*/
                            if (Math.abs(pos[biggest]) < gap) pos[biggest] = pos[biggest] < 0 ? -gap : gap;

                            x = pos['x'];
                            y = pos['y'];
                            z = pos['z'];

                            positions[i] = x;
                            positions[i + 1] = y;
                            positions[i + 2] = z;

                            // colors

                            /*70%     */
                            var hasColor = Math.random() > 0.3;
                            var vx = undefined,
                                vy = undefined,
                                vz = undefined;

                            if (hasColor) {
                                    vx = (Math.random() + 1) / 2;
                                    vy = (Math.random() + 1) / 2;
                                    vz = (Math.random() + 1) / 2;
                            } else {
                                    vx = 1;
                                    vy = 1;
                                    vz = 1;
                            }

                            color.setRGB(vx, vy, vz);

                            colors[i] = color.r;
                            colors[i + 1] = color.g;
                            colors[i + 2] = color.b;
                    }

                    bufferGeometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
                    bufferGeometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
                    bufferGeometry.computeBoundingSphere();

                    /*   material*/
                    var material = new THREE.PointsMaterial({ size: 6, vertexColors: THREE.VertexColors });
                    particleSystem = new THREE.Points(bufferGeometry, material);
                    scene.add(particleSystem);
                    
                    camera.lookAt(new THREE.Vector3(0, 0, 0));

                    renderer.render(scene, camera);
                    
            },
    };

    module.init();