three.js右手坐標系, 顯示和線條


1、右手坐標系

Threejs使用的是右手坐標系,這源於opengl默認情況下,也是右手坐標系。下面是右手坐標系的圖例,如果對這個概念不理解,可以百度一下,我保證你伸出手比划的那一瞬間你就明白了,如果不明白請給作者留言,我會盡快補上關於坐標系的知識。three.js坐標系

圖中右邊那個手對應的坐標系,就是右手坐標系。在Threejs中,坐標和右邊的坐標完全一樣。x軸正方向向右,y軸正方向向上,z軸由屏幕從里向外。

5、線條的深入理解

 

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

點由THREE.Vector3表示,Threejs中沒有提供單獨畫點的函數,它必須被放到一個THREE.Geometry形狀中,這個結構中包含一個數組vertices,這個vertices就是存放無數的點(THREE.Vector3)的數組。這個表示可以如下圖所示:three.js向量

為了繪制一條直線,首先我們需要定義兩個點,如下代碼所示:

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

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

請大家思考一下,這兩個點在坐標系的什么位置,然后我們聲明一個THREE.Geometry,並把點加進入,代碼如下所示:

var geometry = new THREE.Geometry();

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.vertices的能夠使用push方法,是因為geometry.vertices是一個數組。這樣geometry 中就有了2個點了。

然后我們需要給線加一種材質,可以使用專為線准備的材質,THREE.LineBasicMaterial。

最終我們通過THREE.Line繪制了一條線,如下代碼所示:

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

ok,line就是我們要的線條了。

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="libs/Three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                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 ) );//在x軸上定義兩個點p1(-500,0,0)
                geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );//p2(500,0,0)

                for ( var i = 0; i <= 20; i ++ ) {//這兩個點決定了x軸上的一條線段,將這條線段復制20次,分別平行移動到z軸的不同位置,就能夠形成一組平行的線段。

                    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; //  旋轉90度
                    scene.add( line );
//將p1p2這條線先圍繞y軸旋轉90度,然后再復制20份,平行於z軸移動到不同的位置,也能形成一組平行線。
                }
            }

            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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM