webgl之繪圖要點

時間 2019-11-12

標籤 webgl 繪圖要點简体版

原文原文鏈接

　　3D世界是由點組成的，兩個點組成一條直線，而三個點就能夠組成一個三角形，經過三角形就能夠組成任意形狀的物體，而這種組成的物體咱們稱爲Mesh模型，接着Mesh模型加上紋理就組成了真實的3D世界。下面咱們就逐一介紹。html

零、座標系

　　在Three.js中，默認使用的就是右手座標系，即將手掌伸開平行於X軸，而後屈掌使得四指平行於y軸，這時大拇指朝向與z軸相同就是右手座標系，不然，就是左手座標系。下面兩張圖的描述方法都是正確的。以下：git

　　如上，Three.js中使用的就是右邊的這個座標系 - 右手座標系。github

1、點

　　在3D世界中，在創建了座標系以後，就會經過x、y、z三個份量肯定空間中的一個點。Three.js中提供了THREE.Vector3()構造函數來建立一個點，咱們在源碼中搜索Vector3就能夠找到此構造函數的定義，以下所示：app

function Vector3( x, y, z ) {

        this.x = x || 0;
        this.y = y || 0;
        this.z = z || 0;

    }

    Object.assign( Vector3.prototype, {

        isVector3: true,

        set: function ( x, y, z ) {

            this.x = x;
            this.y = y;
            this.z = z;

            return this;

        },

        setScalar: function ( scalar ) {

            this.x = scalar;
            this.y = scalar;
            this.z = scalar;

            return this;

        },

        setX: function ( x ) {

            this.x = x;

            return this;

        },

        // ... 還有不少額外的方法

　　即首先定義了一個構造函數，而後給這個構造函數添加原型，最後，在原型上定義了一系列的方法，因而，若是咱們但願獲取一個點，就能夠經過下面的方式：dom

var point = new THREE.Vector3(50, 50, 50);

　　或者，利用實例的set方法，以下所示：ide

var point1 = new THREE.Vector3(50, 50, 50);

2、線

　　兩點鏈接便可獲得一條線。而若是要在WebGL中建立一條線，須要大體以下步驟：函數

        var geometry = new THREE.Geometry();
        var material = new THREE.LineBasicMaterial({VertexColors: true});
        var p1 = new THREE.Vector3(0, 0, -50);
        var p2 = new THREE.Vector3(50, 0, 50);
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);
        var color1 = new THREE.Color(0x444444),
            color2 = new THREE.Color(0xff00ff);
        geometry.colors.push(color1, color2);
        var line = new THREE.Line(geometry, material, THREE.LinePieces);
        scene.add(line);

　　其中，咱們首先建立一個Geometry（幾何形狀），點、線、面都是幾何形狀，因此畫線，就要先定義一個幾何形狀，而後在經過THREE.LineBasicMaterial構造函數建立直線的材料，實際上，它接受一個配置對象，屬性有Color（顏色）、LineWidth（寬度）、Linecap（線條兩端外觀）、Linejoin（兩個線條鏈接點的外觀）等等。接着，咱們建立了兩個點p1和p2，又push進入geometry中，vertices就是頂點的意思；而後又建立了兩個顏色即兩端點的顏色；再經過THREE.Line將geometry、material結合；最後添加到場景中便可。ui

　　完整代碼以下：this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>three.js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="./three.js"></script>
</head>

<body>
    <script>
        var scene = new THREE.Scene();

        var axes = new THREE.AxesHelper(100);
        scene.add(axes);

        var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.x = 100;
        camera.position.y = 100;
        camera.position.z = 100;
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x111111);
        renderer.setSize(window.innerWidth, window.innerHeight);

        var geometry = new THREE.Geometry();
        var material = new THREE.LineBasicMaterial({vertexColors: true});
        var p1 = new THREE.Vector3(0, 0, -50);
        var p2 = new THREE.Vector3(50, 0, 50);
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);
        var color1 = new THREE.Color(0x444444),
            color2 = new THREE.Color(0xff00ff);
        geometry.colors.push(color1, color2);
        var line = new THREE.Line(geometry, material, THREE.LineSegments);
        scene.add(line);


        document.body.append(renderer.domElement);
        renderer.render(scene, camera);
    </script>
</body>

</html>

View Code

　　效果以下：spa

　即其中的紫色的線就是咱們建立的，而其餘三個是座標軸。

3、面

　　這裏，咱們能夠繪製一個座標平面，其中橫豎都是二十條線，在照相機的拍攝下，以下所示：

　　完整代碼以下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>three.js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="./three.js"></script>
</head>

<body>
    <script>
        var scene = new THREE.Scene();

        var axes = new THREE.AxesHelper(1000);
        scene.add(axes);

        var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.x = 0;
        camera.position.y = 1000;
        camera.position.z = 0;
        camera.up.x = 1;

        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xffffff);
        renderer.setSize(window.innerWidth, window.innerHeight);

        var geometry = new THREE.Geometry();
        var material = new THREE.LineBasicMaterial({color:0x000000, opacity: 0.2});
        var p1 = new THREE.Vector3(-500, 0, 0);
        var p2 = new THREE.Vector3(500, 0, 0);
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);

        for (var i = 0; i <= 20; i++) {
            var line = new THREE.Line(geometry, material);
            line.position.z = (i * 50) - 500;
            scene.add(line);

            var line = new THREE.Line(geometry, material);
            line.position.x = (i * 50) - 500;
            line.rotation.y = 90 * Math.PI / 180;
            scene.add(line);
        
        }

        document.body.append(renderer.domElement);
        renderer.render(scene, camera);
    </script>
</body>

</html>

　　這裏就是經過循環來建立線條，保證封閉便可，經過旋轉方向保證造成一個正方形。

　　至此，咱們就完成了點、線、面的繪製了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。