Three.js學(xué)習(xí)之網(wǎng)格
前言
小編之前發(fā)布過關(guān)于幾何形狀和材質(zhì),相信大家看過學(xué)習(xí)之后,我們就能使用他們來創(chuàng)建物體了。最常用的一種物體就是網(wǎng)格(Mesh),網(wǎng)格是由頂點(diǎn)、邊、面等組成的物體;其他物體包括線段(Line)、骨骼(Bone)、粒子系統(tǒng)(ParticleSystem)等。創(chuàng)建物體需要指定幾何形狀和材質(zhì),其中,幾何形狀決定了物體的頂點(diǎn)位置等信息,材質(zhì)決定了物體的顏色、紋理等信息。
1.創(chuàng)建網(wǎng)格
在前幾篇中,我們學(xué)習(xí)了如何創(chuàng)建幾何形狀與材質(zhì),而網(wǎng)格的創(chuàng)建非常簡單,只要把幾何形狀與材質(zhì)傳入其構(gòu)造函數(shù)。最常用的物體是網(wǎng)格(Mesh),它代表包含點(diǎn)、線、面的幾何體,其構(gòu)造函數(shù)是:
Mesh(geometry, material)
下面,讓我們通過一個(gè)具體的例子了解如何創(chuàng)建網(wǎng)格:
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之后不會(huì)復(fù)用的話,也可以合在一起寫為:
var mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshLambertMaterial({ color: 0xffff00 }) ); scene.add(mesh);
添加光照后,得到的效果為:
如果不指定material,則每次會(huì)隨機(jī)分配一種wireframe為true的材質(zhì),每次刷新頁面后的顏色是不同的,一種可能的效果是:
源碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.js測(cè)試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 修改材質(zhì)
除了在構(gòu)造函數(shù)中指定材質(zhì),在網(wǎng)格被創(chuàng)建后,也能對(duì)材質(zhì)進(jìn)行修改:
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測(cè)試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 位置、縮放、旋轉(zhuǎn)
位置、縮放、旋轉(zhuǎn)是物體三個(gè)常用屬性。由于THREE.Mesh基礎(chǔ)自THREE.Object3D,因此包含scale、rotation、position三個(gè)屬性。它們都是THREE.Vector3實(shí)例,因此修改其值的方法是相同的,這里以位置為例。
THREE.Vector3有x、y、z三個(gè)屬性,如果只設(shè)置其中一個(gè)屬性,則可以用以下方法:
mesh.position.z = 1;
如果需要同時(shí)設(shè)置多個(gè)屬性,可以使用以下兩種方法:
mesh.position.set(1.5, -0.5, 0);
或者:
mesh.position = new THREE.Vector3(1.5, -0.5, 0);
縮放對(duì)應(yīng)的屬性是scale,旋轉(zhuǎn)對(duì)應(yīng)的屬性是rotation,具體方法與上例相同,分別表示沿x、y、z三軸縮放或旋轉(zhuǎn)。
源碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.js測(cè)試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>
本文的內(nèi)容到這就結(jié)束了,文章通過詳細(xì)實(shí)例及圖片介紹了Three.js中的網(wǎng)格,希望本文對(duì)大家學(xué)習(xí)Three.js有所幫助。
- JavaScript實(shí)現(xiàn)拖拽元素對(duì)齊到網(wǎng)格(每次移動(dòng)固定距離)
- 分享十三個(gè)最佳JavaScript數(shù)據(jù)網(wǎng)格庫
- 原生JS實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
- Vue.js實(shí)現(xiàn)網(wǎng)格列表布局轉(zhuǎn)換方法
- Three.js中網(wǎng)格對(duì)象MESH的屬性與方法詳解
- Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解
- JavaScript?Canvas繪制六邊形網(wǎng)格
- JavaScript網(wǎng)格中的最小路徑講解
相關(guān)文章
精通JavaScript 糾正 cleanWhitespace函數(shù)
這個(gè)函數(shù)用在火狐(firefox)上面老是出錯(cuò),今天仔細(xì)研究了下,改正了,希望別人不要遇到我這樣的問題2010-03-03Three.js學(xué)習(xí)之Lamber材質(zhì)和Phong材質(zhì)
本篇將介紹基本材質(zhì)以及兩種基于光照模型的材質(zhì)(Lamber與Phong),有需要的小伙伴們可以參考學(xué)習(xí)。2016-08-08組件庫Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解
這篇文章主要為大家介紹了組件庫Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Three.js學(xué)習(xí)之正交投影照相機(jī)
本篇主要介紹照相機(jī)中的正交投影照相機(jī)。學(xué)習(xí)Three.js的小伙伴們可以參考學(xué)習(xí)。2016-08-08