three.js之建立座標系網格

時間 2019-12-07

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }

        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
<div id="canvas-frame"></div>
<script src="../static/three.js-master/build/three.js"></script>
<script>

    var renderer;  // 渲染器, 聲明變量

    function initThree() {

        renderer = new THREE.WebGLRenderer();  // 建立一個渲染器
        renderer.setSize(window.innerWidth, window.innerHeight);  // 設置寬度高度
        document.getElementById('canvas-frame').appendChild(renderer.domElement);  //添加到畫布canvas-frame裏面
        renderer.setClearColor(0xFFFFFF, 1.0);  // 設置背景色和透明度
    }


    var camera;  // 攝像機

    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);  // 建立一個透視攝像機
        camera.position.set(0, 500, 0);  // 設置攝像機座標
        camera.up.x = 0;
        camera.up.y = 0;
        camera.up.z = 1;
        camera.lookAt(0, 0, 0);
    }


    var scene;  // 場景

    function initScene() {
        scene = new THREE.Scene();  // 建立場景
    }

    var light;

    function initLight() {
        light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);  // THREE.DirectionalLight平行光能夠看做距離很遠的光
        light.position.set(100, 100, 200);  // 座標
        scene.add(light);  // 添加到場景中
    }


    function initObject() {
        var geometry = new THREE.Geometry();  // geometry爲三維空間中的點集同點集閉合後的各個面的集合
        // 在x軸上定義兩個點p1(-500,0,0)，p2(500,0,0)。
        geometry.vertices.push(new THREE.Vector3(-200, 0, 0));
        geometry.vertices.push(new THREE.Vector3(200, 0, 0));
        // 思路：咱們要畫一個網格的座標，那麼咱們就應該找到線的點。把網格虛擬成正方形，在正方形邊界上找到幾個等分點，用這些點兩兩鏈接，就可以畫出整個網格來。
        for (var i = 0; i <= 8; i++) {
            // 這兩個點決定了x軸上的一條線段，將這條線段複製20次，分別平行移動到z軸的不一樣位置，就可以造成一組平行的線段。
            // 同理，將p1p2這條線先圍繞y軸旋轉90度，而後再複製20份，平行於z軸移動到不一樣的位置，也能造成一組平行線。
            // 通過上面的步驟，就可以獲得座標網格了。
            var linex = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
            linex.position.z = (i * 50) - 200;
            scene.add(linex);

            var liney = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
            liney.position.x = (i * 50) - 200;
            liney.rotation.y = 90 * Math.PI / 180;  // 將線旋轉90度
            scene.add(liney);

        }
    }


    function threeStart() {
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        renderer.clear();
        renderer.render(scene, camera);
    }

    threeStart();

</script>
</body>
</html>