使用three.js構(gòu)建地球

一.構(gòu)建星星的背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Solar System</title>

    <style>
        body{
            margin:0;
            padding: 0;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <canvas id="main"></canvas>
    
    <script src="js/three.js"></script>
    <script src="js/stats.min.js"></script>
    
    <script type="text/javascript">
          '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幀率統(tǒng)計*/
                    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; //星星數(shù)量
                    /*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; // 定義星星的最近出現(xiàn)位置

                    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中絕對值最大的一個數(shù)*/
                            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要?。ㄒ驗橐谝粋€距離之外才出現(xià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();
    </script>

</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容