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

來源：懂視網責編：小采時間：2020-11-27 20:20:28

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

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

推薦度：

點擊下載本文 文檔為doc格式

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

上一面講述了向場景中添加物體對象。這一篇準備把每個功能點細細的講述一遍，一方面是為了加深自己的理解。另一方面希望能夠

幫助到有需要的人。

一、在學習WEBGL的時候，你應該先了解要創(chuàng)建一個WebGL程序需要哪些步驟。就跟弄梅菜扣肉一樣，需要哪些步驟。

初始化WebGL繪圖上下文

初始化著色器程序

建立模型和數據緩存

完成繪制和動畫

這是一個面向過程編程。然而three.js不一樣，是一個面向對象編程。主要構建三個對象 scene(場景) camera(相機) renderer(渲染器).。

這三個東西是什么意思呢？聽起來完全不懂是啥。舉個小列子：就拿電影來說。場景（scene)就好比整個布局空間，相機(camera)相當于

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

場景和空間包含了3D和數據模型，而renderer包含了著色器和WebGL繪圖上下文。

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

<!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)建一個場景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //創(chuàng)建相機/*three.js創(chuàng)建相機的方式有很多種,其中最長用的是PerspectiveCamera();
 遠景相機，相當于人眼觀察模式
 肯定有人會有疑問，這幾個參數是什么意思呢？
 第一個 75 是 視角
 width / height 相機拍攝面的長寬比，別問為什么這么寫，我也沒搞清楚。反正設置為窗口
 的width/height圖形就不會被壓變形。
 下面兩個是近裁剪面。和遠裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其實是用CANVAS渲染。 renderer.setSize(width,height);
 document.getElementsByTagName('body')[0].appendChild(renderer.domElement);</script></html>

電影，場景，膠卷都準備好了，那如何才能展示演員呢？也就是上面一篇說的如何向場景中添加物體對象呢？

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

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

這樣這個演員就入鏡了。

四、如何讓這個演員動起來呢？

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

演員入鏡，并有了，打動效果。第一個小短篇算完成了吧。

五、整個代碼(本來想托管到githup上)。發(fā)現太慢了。

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

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

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

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：一個創(chuàng)建 js

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦