幫助到有需要的人。
一、在學(xué)習(xí)WEBGL的時候，你應(yīng)該先了解要創(chuàng)建一個WebGL程序需要哪些步驟。就跟弄梅菜扣肉一樣，需要哪些步驟。
初始化WebGL繪圖上下文
初始化著色器程序
建立模型和數(shù)據(jù)緩存
完成繪制和動畫
這是一個面向過程編程。然而three.js不一樣，是一個面向?qū)ο缶幊獭Ｖ饕獦?gòu)建三個對象 scene(場景) camera(相機) renderer(渲染器).。
這三個東西是什么意思呢？聽起來完全不懂是啥。舉個小列子：就拿電影來說。場景（scene)就好比整個布局空間，相機(camera)相當(dāng)于
拍攝期。而渲染器相當(dāng)于(renderer)把拍攝的電影轉(zhuǎn)換成膠卷也就是電腦的屏幕。
場景和空間包含了3D和數(shù)據(jù)模型，而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();
遠景相機，相當(dāng)于人眼觀察模式
肯定有人會有疑問，這幾個參數(shù)是什么意思呢？
第一個 75 是 視角
width / height 相機拍攝面的長寬比，別問為什么這么寫，我也沒搞清楚。反正設(shè)置為窗口
的width/height圖形就不會被壓變形。
下面兩個是近裁剪面。和遠裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其實是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);</script></html>電影，場景，膠卷都準(zhǔn)備好了，那如何才能展示演員呢？也就是上面一篇說 的如何向場景中添加物體對象呢？
三、添加演員（3D立方體）。
//演員進場var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方體所有頂點和填充面的對象。var material = new THREE.MeshBasicMaterial({color:'red'});//有個幾何模型，我們需要材料為其上色。我們采用的時候 網(wǎng)孔基礎(chǔ)材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一個網(wǎng)孔,來承載幾何模型和材料scene.add(mesh); //把這個網(wǎng)孔放置到場景中去。camera.position.z = 5; //調(diào)節(jié)相機的位置。renderer.render(scene,camera); //把畫面轉(zhuǎn)換成相機，并播放
這樣這個演員就入鏡了。
四、如何讓這個演員動起來呢？
//懂動起來。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X選擇mesh.rotation.y += 0.1; //Y旋轉(zhuǎn)renderer.render(scene,camera); //把畫面轉(zhuǎn)換成相機，并播放 }
loop();//解釋下requestAnimationFrame這個api/* requestAnimationFrame這個函數(shù)，它用來替代 setInterval， 這個新接口具備多個優(yōu)點，
比如瀏覽器Tab切換后停止渲染以節(jié)約資源、
和屏幕刷新同步避免無效刷新、在不支持該接口的瀏覽器中能安全回退為setInterval。
簡直就是動畫神奇 */
演員入鏡，并有了，打動效果。第一個小短篇算完成了吧。
五、整個代碼(本來想托管到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)建一個場景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //創(chuàng)建相機/*three.js創(chuàng)建相機的方式有很多種,其中最長用的是PerspectiveCamera();
遠景相機，相當(dāng)于人眼觀察模式
肯定有人會有疑問，這幾個參數(shù)是什么意思呢？
第一個 75 是 視角
width / height 相機拍攝面的長寬比，別問為什么這么寫，我也沒搞清楚。反正設(shè)置為窗口
的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'});//有個幾何模型，我們需要材料為其上色。我們采用的時候 網(wǎng)孔基礎(chǔ)材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一個網(wǎng)孔,來承載幾何模型和材料scene.add(mesh); //把這個網(wǎng)孔放置到場景中去。camera.position.z = 5; //調(diào)節(jié)相機的位置。//懂動起來。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X選擇mesh.rotation.y += 0.1; //Y旋轉(zhuǎn)renderer.render(scene,camera); //把畫面轉(zhuǎn)換成相機，并播放 }
loop();//解釋下requestAnimationFrame這個api/* requestAnimationFrame這個函數(shù)，它用來替代 setInterval， 這個新接口具備多個優(yōu)點，
比如瀏覽器Tab切換后停止渲染以節(jié)約資源、
和屏幕刷新同步避免無效刷新、在不支持該接口的瀏覽器中能安全回退為setInterval。
簡直就是動畫神奇 */</script>
</html>六、在WebGL中three.js扮演了重要的角色，然而中文api真的少。只有一個一個的慢慢累積。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
