Mesh網面

Mesh類別繼承自Object3D類別。

我們知道兩點能夠定義直線,而三個點能夠定義一個三角形平面,多個平面則可定義出不同種類的多邊形,以多個平面建構物件的方式就稱為多邊形建模,建立出的物件我們稱之為Mesh(網面)或是網格。

以下以三角形平面為例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="build/three.min.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.z = 500;
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
            var geometry = new THREE.Geometry();
            geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );  // vertex 0
            geometry.vertices.push( new THREE.Vector3( 0, 200, 0 ) );   // vertex 1
            geometry.vertices.push( new THREE.Vector3( 300, 200, 0 ) );  // vertex 2
            geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );  // make a triangle
            var mesh = new THREE.Mesh( geometry, material );  // create an object
            scene.add( mesh ); // add object to the scene to make it visible

            renderer.render( scene, camera );
        </script>
    </body>
</html>    

其中:

var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );  // vertex 0
geometry.vertices.push( new THREE.Vector3( 0, 200, 0 ) );   // vertex 1
geometry.vertices.push( new THREE.Vector3( 300, 200, 0 ) );  // vertex 2
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );  // make a triangle
var mesh = new THREE.Mesh( geometry, material );  // create an object
scene.add( mesh ); // add object to the scene to make it visible

在上式中我們個別建立好材質和幾合體,以Mesh的建構式就能輕鬆建立好物件,而最後只要利用scene.add()就能將建立好的物件加入到場景之中。

results matching ""

    No results matching ""