碼上歡樂
相關內容    簡體    繁體

Three.js基礎探尋九——網格

本文轉載自   查看原文   2016-08-10 08:32   2388    圖形繪制相關/ webGL/ js

　　在學習了幾何形狀和材質之后，我們就能使用他們來創建物體了。最常用的一種物體就是網格（Mesh），網格是由頂點、邊、面等組成的物體；其他物體包括線段（Line）、骨骼（Bone）、粒子系統（ParticleSystem）等。創建物體需要指定幾何形狀和材質，其中，幾何形狀決定了物體的頂點位置等信息，材質決定了物體的顏色、紋理等信息。

　　本篇將介紹創建較為常用的物體：網格，然后介紹如何修改物體的屬性。

1.創建網格

　　在前幾篇中，我們學習了如何創建幾何形狀與材質，而網格的創建非常簡單，只要把幾何形狀與材質傳入其構造函數。最常用的物體是網格（Mesh），它代表包含點、線、面的幾何體，其構造函數是： 

Mesh(geometry, material)

　　下面，讓我們通過一個具體的例子了解如何創建網格：

var material = new THREE.MeshLambertMaterial({

    color: 0xffff00

});

var geometry = new THREE.CubeGeometry(1, 2, 3);

var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

　　如果material和geometry之后不會復用的話，也可以合在一起寫為： 

var mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),

    new THREE.MeshLambertMaterial({

        color: 0xffff00

    })

);

scene.add(mesh);

　　添加光照后，得到的效果為：

　　如果不指定material，則每次會隨機分配一種wireframe為true的材質，每次刷新頁面后的顏色是不同的，一種可能的效果是：

　　源碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3.js測試9.1</title> 
    </head>
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript">
        function init() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            var scene = new THREE.Scene();
            
            // camera
            var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
            camera.position.set(5, 5, 20);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
            
            var material = new THREE.MeshLambertMaterial({
                color: 0xffff00
            });
//          var material = new THREE.MeshBasicMaterial({
//              color: 0xffff00,
//              wireframe: true
//          });
            var geometry = new THREE.CubeGeometry(1, 2, 3);
            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(20, 10, 5);
            scene.add(light);
            
            // render
            renderer.render(scene, camera);
        }
    </script>
</html>

 

 

 

2.修改屬性

　　2.1 修改材質

　　除了在構造函數中指定材質，在網格被創建后，也能對材質進行修改：

var material = new THREE.MeshLambertMaterial({

    color: 0xffff00

});

var geometry = new THREE.CubeGeometry(1, 2, 3);

var mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);

mesh.material = new THREE.MeshLambertMaterial({

    color: 0xff0000

});

　　最終顯示的顏色是紅色：

　　源碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3.js測試9.2</title> 
    </head>
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
    <script type="text/javascript" src="js/three.min.js"></script>  
    <script type="text/javascript">
        function init() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            var scene = new THREE.Scene();
            
            // camera
            var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
            camera.position.set(5, 5, 20);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
            
            var material = new THREE.MeshLambertMaterial({
                color: 0xffff00
            });
            var geometry = new THREE.CubeGeometry(1, 2, 3);
            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            
            mesh.material = new THREE.MeshLambertMaterial({
                color: 0xff0000
            });
            
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(20, 10, 5);
            scene.add(light);
            
            // render
            renderer.render(scene, camera);
        }
    </script>
</html>

　　2.2 位置、縮放、旋轉

　　位置、縮放、旋轉是物體三個常用屬性。由於THREE.Mesh基礎自THREE.Object3D，因此包含scale、rotation、position三個屬性。它們都是THREE.Vector3實例，因此修改其值的方法是相同的，這里以位置為例。

　　THREE.Vector3有x、y、z三個屬性，如果只設置其中一個屬性，則可以用以下方法： 

mesh.position.z = 1;

　　如果需要同時設置多個屬性，可以使用以下兩種方法：

mesh.position.set(1.5, -0.5, 0);

　　或者：

mesh.position = new THREE.Vector3(1.5, -0.5, 0);

　　縮放對應的屬性是scale，旋轉對應的屬性是rotation，具體方法與上例相同，分別表示沿x、y、z三軸縮放或旋轉。

　　源碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3.js測試9.3</title>
    </head>
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript">
        function init() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            var scene = new THREE.Scene();
            
            // camera
            var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
            camera.position.set(5, 5, 20);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
            
            var material = new THREE.MeshLambertMaterial({
                color: 0xffff00
            });
            var geometry = new THREE.CubeGeometry(1, 2, 3);
            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            
            mesh.position.set(1.5, -0.5, 0);
            mesh.position = new THREE.Vector3(1.5, -0.5, 0);
            mesh.position.z = 1;
            
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(20, 10, 5);
            scene.add(light);
            
            drawAxes(scene);
            
            // render
            renderer.render(scene, camera);
        }
        
        function drawAxes(scene) {
            // x-axis
            var xGeo = new THREE.Geometry();
            xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
            xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
            var xMat = new THREE.LineBasicMaterial({
                color: 0xff0000
            });
            var xAxis = new THREE.Line(xGeo, xMat);
            scene.add(xAxis);
            
            // y-axis
            var yGeo = new THREE.Geometry();
            yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
            yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
            var yMat = new THREE.LineBasicMaterial({
                color: 0x00ff00
            });
            var yAxis = new THREE.Line(yGeo, yMat);
            scene.add(yAxis);
            
            // z-axis
            var zGeo = new THREE.Geometry();
            zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
            zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
            var zMat = new THREE.LineBasicMaterial({
                color: 0x00ccff
            });
            var zAxis = new THREE.Line(zGeo, zMat);
            scene.add(zAxis);
        }
    </script>
</html>

 

 

整理自張雯莉《Three.js入門指南》

 


免責聲明！

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



猜您在找 Three.js基礎探尋一 Three.js基礎探尋十——動畫 Three.js基礎探尋七——Lamber材質與Phong材質 Three.js基礎探尋四——立方體、平面與球體 Three.js基礎探尋八——法向材質與材質的紋理貼圖 Three.js基礎探尋四——立方體、平面與球體 Three.js基礎探尋三——透視投影照相機 Three.js基礎探尋二——正交投影照相機 Three.js基礎探尋六——文字形狀與自定義形狀 Three.js基礎探尋五——正二十面體、圓環面等
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM