3.點線面後篇

時間 2019-11-26

原文原文鏈接

座標系

Threejs使用的是右手座標系，這源於opengl默認狀況下，也是右手座標系。
css

WebGL中的點線面

線條的深刻理解html

在Threejs中，一條線由點，材質和顏色組成。git

點由THREE.Vector3表示，Threejs中沒有提供單獨畫點的函數，它必須被放到一個THREE.Geometry形狀中，這個結構中包含一個數組vertices，這個vertices就是存放無數的點（THREE.Vector3）的數組。這個表示能夠以下圖所示：three.js向量github

爲了繪製一條直線，首先咱們須要定義兩個點，以下代碼所示：web

var p1 = new THREE.Vector3( -100, 0, 100 );

var p2 = new THREE.Vector3( 100, 0, -100 );

請你們思考一下，這兩個點在座標系的什麼位置，而後咱們聲明一個THREE.Geometry，並把點加進入，代碼以下所示：canvas

var geometry = new THREE.Geometry();數組

geometry.vertices.push(p1);瀏覽器

geometry.vertices.push(p2);app

geometry.vertices的可以使用push方法，是由於geometry.vertices是一個數組。這樣geometry 中就有了2個點了。dom

而後咱們須要給線加一種材質，可使用專爲線準備的材質，THREE.LineBasicMaterial。

最終咱們經過THREE.Line繪製了一條線，以下代碼所示:

var line = new THREE.Line( geometry, material, THREE.LinePieces );

ok，line就是咱們要的線條了。
六、畫高中時深愛的座標平面

我還深愛着高中時的那個座標平面，它勾起了我關於前排同窗的細細長髮的回憶…

這個平面的效果以下所示：three.js畫座標系

它橫豎分別繪製了20條線段，在攝像機的照射下，就造成了這般模樣。

完整代碼以下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網格線</title>
        <script src="../three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 1000px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 1000;
                camera.position.z = 0;
                camera.up.x = 0;
                camera.up.y = 0;
                camera.up.z = 1;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
                light.position.set(100, 100, 200);
                scene.add(light);
            }

            var cube;
            function initObject() {
                var geometry = new THREE.Geometry();
                geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
                geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

                for ( var i = 0; i <= 20; i ++ ) {

                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                    line.position.z = ( i * 50 ) - 500;
                    scene.add( line );


                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                    line.position.x = ( i * 50 ) - 500;
                    line.rotation.y = 90 * Math.PI / 180;//沿y軸旋轉90du
                    scene.add( line );

                }
            }

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

        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>

學習的資料和源碼我都共享到個人gitHub倉庫中去了,你們有興趣的能夠去下載,歡迎foke,clone,加星星,也算是對個人一個鼓勵吧

three學習資料的github地址
或者複製連接地址到瀏覽器
https://github.com/kingder-c/LearnThree.js

裏面除了源碼和筆記以外再document中還有我推薦的兩本教材的電子書,但願能幫助到你們若是你們有更好的學習資料一歡迎提交的上面去供你們一塊兒交流和學習,對你們發出的PR我必定及時接受