您好,登錄后才能下訂單哦!
簡(jiǎn)介
three.js 是一款WebGL框架,WebGL可以讓我們?cè)赾anvas上實(shí)現(xiàn)3D效果。實(shí)現(xiàn)3D效果在國(guó)內(nèi)來(lái)說(shuō)還算是比較新的東西,可供查閱的資料也不多。這篇文章僅是一個(gè)入門(mén)篇,介紹如何繪制一個(gè)3D正方體。
Three.js中的基本概念
Three.js包含3個(gè)基本概念:場(chǎng)景(Scene)、相機(jī)(Camera)和渲染器(Renderer)。
場(chǎng)景就是需要繪制的對(duì)象,相機(jī)代表取景的視角,渲染器是繪制的載體(可以?huà)炜康綖g覽器的DOM元素中),
也就是我們通過(guò)相機(jī)拍攝場(chǎng)景然后繪制到目標(biāo)介質(zhì)中去。
創(chuàng)建場(chǎng)景、相機(jī)和渲染器
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
上述代碼首先創(chuàng)建一個(gè)場(chǎng)景,然后創(chuàng)建一個(gè)PerspectiveCamera(立體感的相機(jī)),接著創(chuàng)建了一個(gè)WebGL的渲染器(注意Three.js也支持非3D的Canvas 2D的渲染器),然后掛靠為HTML文檔body的DOM子元素。
介紹完畢,首先奉上實(shí)現(xiàn)的效果圖:
這就是實(shí)現(xiàn)的效果圖,還是挺有立體感的吧?
繪制前的準(zhǔn)備
寫(xiě)代碼前,要先下載最新的three.js框架包,引入自己的頁(yè)面。
具體實(shí)現(xiàn)過(guò)程
準(zhǔn)備一個(gè)canvas畫(huà)布
這個(gè)畫(huà)布是我們展現(xiàn)整個(gè)3D正方形的畫(huà)布,也就是上圖那個(gè)黑色的方框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Camera 相機(jī)</title> <style> #canvas { width: 400px; height: 300px; border: 1px solid red; margin: 50px auto; display:block; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="./libs/three.min.js"></script> </body> </html>
明確繪制思路
接下來(lái)的繪制過(guò)程會(huì)涉及到多個(gè)概念:canvas、scene、camera、renderer。
為了能更好理解繪制過(guò)程的代碼和有助于記憶,我們先來(lái)理解這幾個(gè)概念:
假設(shè)我們現(xiàn)在正在旅游的途中,看到了一個(gè)很唯美的畫(huà)面,想把這個(gè)3D世界記錄下來(lái)
這樣,我們就能成功展現(xiàn)這個(gè)3D世界了。
【程序還是很貼近生活噠😊】
通過(guò)現(xiàn)實(shí)世界的理解,我們接下來(lái)開(kāi)始代碼啦o( ̄▽?zhuān)?ブ
準(zhǔn)備好canvas、scene、camera、renderer,給一個(gè)初始化的方法
<script> var camera, scene, renderer, canvas; init(); function init () { canvas = document.getElementById('canvas'); }
接下來(lái)我們要做的就是完善這個(gè)init()方法啦。
創(chuàng)建一個(gè)3D場(chǎng)景scene
場(chǎng)景最簡(jiǎn)單了,只需要用Scene聲明一個(gè)scene對(duì)象。
scene = new THREE.Scene();
準(zhǔn)備好camera
我們這里設(shè)置的相機(jī)是一個(gè)透視的相機(jī)PerspectiveCamera
camera有四個(gè)參數(shù)
camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);
接下來(lái)給camera設(shè)置擺放的位置,并把camera放到場(chǎng)景scene中
由于我們的世界是3D的,camera的擺放位置也是三維的,涉及三個(gè)參數(shù):X軸、Y軸、Z軸。(0, 0, 0)是相機(jī)的原點(diǎn),(1, 1, 5)就是把我們的相機(jī)往右和往上移動(dòng)了1個(gè)單位,往后移動(dòng)了5個(gè)單位。
ps: 這個(gè)時(shí)候畫(huà)布canvas的大小正好是正方體的5倍。
camera.position.set(1, 1, 5); scene.add(camera);
在場(chǎng)景中添加一個(gè)立方體
每個(gè)形狀都是一個(gè)mesh,geometry可以理解為物體的骨骼, material可以理解為物體的皮囊
再創(chuàng)建一個(gè)可填充的形狀cube
這樣就構(gòu)成了完整的實(shí)物
我們?cè)賹⑦@個(gè)形狀放入場(chǎng)景scene中
CubeGeometry參數(shù)設(shè)置為1:1:1表示這是一個(gè)正方體,當(dāng)然可以自行修改比例,變成不一樣的立方體
var geometry = new THREE.CubeGeometry(1, 1, 1); // 添加three自帶的最簡(jiǎn)單的一種材質(zhì) var material = new THREE.MeshBasicMaterial({ color: 0xff0000, }); var cube = new THREE.Mesh(geometry, material); var cube = new THREE.Mesh(geometry, material);
最后,創(chuàng)建renderer對(duì)圖像進(jìn)行渲染
將canvas交給renderer,也就是一個(gè)渲染的容器
antialias: true 平滑,抗鋸齒,輸出的畫(huà)面會(huì)進(jìn)行優(yōu)化,不會(huì)帶毛邊
renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); // 設(shè)置renderer的樣式 renderer.setSize(canvas.width, canvas.height); renderer.render(scene, camera);
經(jīng)過(guò)以上步驟,我們的的正方體就成功創(chuàng)建好了。
以下是本例完整代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Camera 相機(jī)</title> <style> #canvas { width: 400px; height: 300px; border: 1px solid red; margin: 50px auto; display:block; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="./libs/three.min.js"></script> <script> var camera, scene, renderer, canvas; init(); function init () { canvas = document.getElementById('canvas'); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10); camera.position.set(1, 1, 5); scene.add(camera); var geometry = new THREE.CubeGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0xff0000, }); // cube 是一個(gè)可以填充的形狀 var cube = new THREE.Mesh(geometry, material); scene.add(cube); renderer = new THREE.WebGLRenderer({ // 將canvas交給renderer 一個(gè)渲染的容器 canvas: canvas, // 平滑, 抗鋸齒 輸出的畫(huà)面會(huì)進(jìn)行優(yōu)化,不會(huì)帶毛邊 antialias: true }); // 設(shè)置renderer的樣子 renderer.setSize(canvas.width, canvas.height); renderer.render(scene, camera); } </script> </body> </html>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。