Three.js之如何創(chuàng)建一個(gè)場(chǎng)景

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:20:28

Three.js之如何創(chuàng)建一個(gè)場(chǎng)景

Three.js之如何創(chuàng)建一個(gè)場(chǎng)景:上一面講述了向場(chǎng)景中添加物體對(duì)象。這一篇準(zhǔn)備把每個(gè)功能點(diǎn)細(xì)細(xì)的講述一遍，一方面是為了加深自己的理解。另一方面希望能夠幫助到有需要的人。一、在學(xué)習(xí)WEBGL的時(shí)候，你應(yīng)該先了解要?jiǎng)?chuàng)建一個(gè)WebGL程序需要哪些步驟。就跟弄梅菜扣肉一樣，需要哪些步驟。初始

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Three.js之如何創(chuàng)建一個(gè)場(chǎng)景:上一面講述了向場(chǎng)景中添加物體對(duì)象。這一篇準(zhǔn)備把每個(gè)功能點(diǎn)細(xì)細(xì)的講述一遍，一方面是為了加深自己的理解。另一方面希望能夠幫助到有需要的人。一、在學(xué)習(xí)WEBGL的時(shí)候，你應(yīng)該先了解要?jiǎng)?chuàng)建一個(gè)WebGL程序需要哪些步驟。就跟弄梅菜扣肉一樣，需要哪些步驟。初始

上一面講述了向場(chǎng)景中添加物體對(duì)象。這一篇準(zhǔn)備把每個(gè)功能點(diǎn)細(xì)細(xì)的講述一遍，一方面是為了加深自己的理解。另一方面希望能夠

幫助到有需要的人。

一、在學(xué)習(xí)WEBGL的時(shí)候，你應(yīng)該先了解要?jiǎng)?chuàng)建一個(gè)WebGL程序需要哪些步驟。就跟弄梅菜扣肉一樣，需要哪些步驟。

初始化WebGL繪圖上下文

初始化著色器程序

建立模型和數(shù)據(jù)緩存

完成繪制和動(dòng)畫

這是一個(gè)面向過(guò)程編程。然而three.js不一樣，是一個(gè)面向?qū)ο缶幊獭Ｖ饕獦?gòu)建三個(gè)對(duì)象 scene(場(chǎng)景) camera(相機(jī)) renderer(渲染器).。

這三個(gè)東西是什么意思呢？聽起來(lái)完全不懂是啥。舉個(gè)小列子：就拿電影來(lái)說(shuō)。場(chǎng)景（scene)就好比整個(gè)布局空間，相機(jī)(camera)相當(dāng)于

拍攝期。而渲染器相當(dāng)于(renderer)把拍攝的電影轉(zhuǎn)換成膠卷也就是電腦的屏幕。

場(chǎng)景和空間包含了3D和數(shù)據(jù)模型，而renderer包含了著色器和WebGL繪圖上下文。

二、THREE.JS創(chuàng)建場(chǎng)景，相機(jī)，渲染器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Demo1(three入門第一篇)</title></head><body></body><script type="text/javascript" src="js/three.js?1.1.11"></script><script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //創(chuàng)建一個(gè)場(chǎng)景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //創(chuàng)建相機(jī)/*three.js創(chuàng)建相機(jī)的方式有很多種,其中最長(zhǎng)用的是PerspectiveCamera();
 遠(yuǎn)景相機(jī)，相當(dāng)于人眼觀察模式
 肯定有人會(huì)有疑問(wèn)，這幾個(gè)參數(shù)是什么意思呢？
 第一個(gè) 75 是 視角
 width / height 相機(jī)拍攝面的長(zhǎng)寬比，別問(wèn)為什么這么寫，我也沒(méi)搞清楚。反正設(shè)置為窗口
 的width/height圖形就不會(huì)被壓變形。
 下面兩個(gè)是近裁剪面。和遠(yuǎn)裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其實(shí)是用CANVAS渲染。 renderer.setSize(width,height);
 document.getElementsByTagName('body')[0].appendChild(renderer.domElement);</script></html>

電影，場(chǎng)景，膠卷都準(zhǔn)備好了，那如何才能展示演員呢？也就是上面一篇說(shuō) 的如何向場(chǎng)景中添加物體對(duì)象呢？

三、添加演員（3D立方體）。

 //演員進(jìn)場(chǎng)var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方體所有頂點(diǎn)和填充面的對(duì)象。var material = new THREE.MeshBasicMaterial({color:'red'});//有個(gè)幾何模型，我們需要材料為其上色。我們采用的時(shí)候 網(wǎng)孔基礎(chǔ)材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一個(gè)網(wǎng)孔,來(lái)承載幾何模型和材料scene.add(mesh); //把這個(gè)網(wǎng)孔放置到場(chǎng)景中去。camera.position.z = 5; //調(diào)節(jié)相機(jī)的位置。renderer.render(scene,camera); //把畫面轉(zhuǎn)換成相機(jī)，并播放

這樣這個(gè)演員就入鏡了。

四、如何讓這個(gè)演員動(dòng)起來(lái)呢？

 //懂動(dòng)起來(lái)。function loop(){
 requestAnimationFrame(loop);
 mesh.rotation.x += 0.1; //X選擇mesh.rotation.y += 0.1; //Y旋轉(zhuǎn)renderer.render(scene,camera); //把畫面轉(zhuǎn)換成相機(jī)，并播放 }
 loop();//解釋下requestAnimationFrame這個(gè)api/* requestAnimationFrame這個(gè)函數(shù)，它用來(lái)替代 setInterval， 這個(gè)新接口具備多個(gè)優(yōu)點(diǎn)，
 比如瀏覽器Tab切換后停止渲染以節(jié)約資源、
 和屏幕刷新同步避免無(wú)效刷新、在不支持該接口的瀏覽器中能安全回退為setInterval。
 簡(jiǎn)直就是動(dòng)畫神奇 */

演員入鏡，并有了，打動(dòng)效果。第一個(gè)小短篇算完成了吧。

五、整個(gè)代碼(本來(lái)想托管到githup上)。發(fā)現(xiàn)太慢了。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Demo1(three入門第一篇)</title>
</head>
<body>

</body>
<script type="text/javascript" src="js/three.js?1.1.11"></script>
<script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //創(chuàng)建一個(gè)場(chǎng)景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //創(chuàng)建相機(jī)/*three.js創(chuàng)建相機(jī)的方式有很多種,其中最長(zhǎng)用的是PerspectiveCamera();
 遠(yuǎn)景相機(jī)，相當(dāng)于人眼觀察模式
 肯定有人會(huì)有疑問(wèn)，這幾個(gè)參數(shù)是什么意思呢？
 第一個(gè) 75 是 視角
 width / height 相機(jī)拍攝面的長(zhǎng)寬比，別問(wèn)為什么這么寫，我也沒(méi)搞清楚。反正設(shè)置為窗口
 的width/height圖形就不會(huì)被壓縮。
 下面兩個(gè)是近裁剪面。和遠(yuǎn)裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其實(shí)是用CANVAS渲染。 renderer.setSize(width,height);
 document.getElementsByTagName('body')[0].appendChild(renderer.domElement);//演員進(jìn)場(chǎng)var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方體所有頂點(diǎn)和填充面的對(duì)象。var material = new THREE.MeshBasicMaterial({color:'red'});//有個(gè)幾何模型，我們需要材料為其上色。我們采用的時(shí)候 網(wǎng)孔基礎(chǔ)材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一個(gè)網(wǎng)孔,來(lái)承載幾何模型和材料scene.add(mesh); //把這個(gè)網(wǎng)孔放置到場(chǎng)景中去。camera.position.z = 5; //調(diào)節(jié)相機(jī)的位置。//懂動(dòng)起來(lái)。function loop(){
 requestAnimationFrame(loop);
 mesh.rotation.x += 0.1; //X選擇mesh.rotation.y += 0.1; //Y旋轉(zhuǎn)renderer.render(scene,camera); //把畫面轉(zhuǎn)換成相機(jī)，并播放 }
 loop();//解釋下requestAnimationFrame這個(gè)api/* requestAnimationFrame這個(gè)函數(shù)，它用來(lái)替代 setInterval， 這個(gè)新接口具備多個(gè)優(yōu)點(diǎn)，
 比如瀏覽器Tab切換后停止渲染以節(jié)約資源、
 和屏幕刷新同步避免無(wú)效刷新、在不支持該接口的瀏覽器中能安全回退為setInterval。
 簡(jiǎn)直就是動(dòng)畫神奇 */</script>
</html>

六、在WebGL中three.js扮演了重要的角色，然而中文api真的少。只有一個(gè)一個(gè)的慢慢累積。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Three.js之如何創(chuàng)建一個(gè)場(chǎng)景

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：一個(gè) 創(chuàng)建 js

熱門焦點(diǎn)

Three.js之如何創(chuàng)建一個(gè)場(chǎng)景

Three.js之如何創(chuàng)建一個(gè)場(chǎng)景

Three.js之如何創(chuàng)建一個(gè)場(chǎng)景

最新推薦

猜你喜歡

熱門推薦