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>

　　这里就是经过循环来建立线条，保证封闭便可，经过旋转方向保证造成一个正方形。

　　至此，咱们就完成了点、线、面的绘制了。