Three.js基礎(chǔ)的示例分析

這篇文章給大家分享的是有關(guān)Three.js基礎(chǔ)的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司是專業(yè)的涼城網(wǎng)站建設(shè)公司，涼城接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行涼城網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

一、Three.js官網(wǎng)及使用Three.js必備的三個條件

1.Three.js 官網(wǎng) https://threejs.org/

2.使用Three.js必備的三個條件

(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.)

大致意思是使用three.js可以實(shí)現(xiàn)任何顯示的東西，必須滿足三個條件: a scene場景、a camera相機(jī)、a renderer渲染器. 三者缺一不可。

二、使用Three.js必備三個條件（a scene場景、a camera相機(jī)、a renderer渲染器）之間的關(guān)系　

Three.js基礎(chǔ)的示例分析

如上圖所示，來說明a scene場景、a camera相機(jī)、a renderer渲染器三者之間關(guān)系[/code]

1.場景scene是一個物體的容器【通俗理解裝東西的嘛】，開發(fā)者可以將需要的角色放入場景中，例如蘋果，葡萄。同時，角色自身也管理著其在場景中的位置。

2.相機(jī)camera的作用就是面對場景，在場景中取一個合適的景，把它拍下來。【可以想象成人的眼睛】

3.渲染器renderer的作用就是將相機(jī)拍攝下來的圖片，放到瀏覽器中去顯示

三、通過上述理論來實(shí)踐官網(wǎng)案例

效果圖如下

Three.js基礎(chǔ)的示例分析

官網(wǎng)案例實(shí)現(xiàn)源碼


 
 My first three.js app

通過官網(wǎng)案例不難發(fā)現(xiàn)，camera照相機(jī)默認(rèn)的觀察方向是屏幕的方向(z軸負(fù)方向),當(dāng)變化坐標(biāo)以后，就要將照相機(jī)指向原點(diǎn)，才能觀察到物體

Three.js基礎(chǔ)的示例分析 z軸負(fù)方向？？？因此這里很有必要說說三維坐標(biāo)（如下圖）

Three.js基礎(chǔ)的示例分析

Three.js基礎(chǔ)的示例分析照相機(jī)指向原點(diǎn)？？？來說說相機(jī)camera相機(jī)（很重要!!想象一下人看不到東西是什么感覺）.

案例中采用透視相機(jī)（從視點(diǎn)開始越近的物體越大、遠(yuǎn)處的物體繪制的較小的一種方式、和日常生活中我們看物體的方式是一致的。）

var camera = new THREE.PerspectiveCamera(fov, aspect , near,far)

Three.js基礎(chǔ)的示例分析

new THREE.PerspectiveCamera(fov, aspect , near,far) 透視相機(jī)
視野角：fov 這里視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大
縱橫比：aspect
相機(jī)離視體積最近的距離：near
相機(jī)離視體積最遠(yuǎn)的距離：far

綜上，相信結(jié)合上述三維坐標(biāo)、相機(jī)圖理解相機(jī)、就應(yīng)該變得很簡單咯哦.接下來接著修改上述案例（說明后面案例鼠標(biāo)滾動放大縮小、三維旋轉(zhuǎn)都是基于相機(jī)來實(shí)現(xiàn)的）

四、將官網(wǎng)案修改且設(shè)置相機(jī)朝向及相機(jī)位置

利用[lookAt]方法來設(shè)置相機(jī)的視野中心。「lookAt()」的參數(shù)是一個屬性包含中心坐標(biāo)「x」「y」「z」的對象。

設(shè)置相機(jī)的上方向?yàn)檎较騳軸 camera.up.x = 0; camera.up.y = 1/*相機(jī)朝向--相機(jī)上方為y軸*/; camera.up.z = 0;

五、實(shí)現(xiàn)旋轉(zhuǎn)立方體

旋轉(zhuǎn)動畫原理相機(jī)圍繞y軸旋轉(zhuǎn)，不斷修改相機(jī)x、z軸位置，并且保持場景中的物體一直再相機(jī)的視野中，實(shí)時將相機(jī)拍攝下來的圖片，放到瀏覽器中去顯示

//相機(jī)圍繞y軸旋轉(zhuǎn)，不斷修改相機(jī)x、z軸位置，并且保持場景中的物體一直再相機(jī)的視野中
//實(shí)時渲染成像
function animation(){
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100;
  camera.position.z = Math.sin(timer)*100;
  camera.lookAt(scene.position); //設(shè)置相機(jī)視野中心
  renderer.render(scene, camera);
  requestAnimationFrame(animation);//渲染回調(diào)函數(shù)
}

實(shí)現(xiàn)效果圖如下所示

Three.js基礎(chǔ)的示例分析

旋轉(zhuǎn)立方體——案例源碼



 
 
 旋轉(zhuǎn)立方體

var renderer, //渲染器 width = document.getElementById('canvas-frame').clientWidth, //畫布寬 height = document.getElementById('canvas-frame').clientHeight; //畫布高 //初始化渲染器 function initThree(){ renderer = new THREE.WebGLRenderer({ antialias : true //canvas: document.getElementById('canvas-frame') }); renderer.setSize(width, height); renderer.setClearColor(0xFFFFFF, 1.0); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } //初始化場景 var scene; function initScene(){ scene = new THREE.Scene(); } var camera; function initCamera() { //透視相機(jī) camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000); camera.position.x = 50; camera.position.y = 150; camera.position.z =150; camera.up.x = 0; camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸 camera.up.z = 0; camera.lookAt({ //相機(jī)的中心點(diǎn) x : 0, y : 0, z : 0 }); // camera 正交相機(jī) /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000); camera.position.x = 250; camera.position.y = 100; camera.position.z = 1800; camera.up.x = 0; camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸 camera.up.z = 0; camera.lookAt({ //相機(jī)的中心點(diǎn) x : 0, y : 0, z : 0 });*/ } function initLight(){ // light--這里使用環(huán)境光 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/ //light.position.set(600, 1000, 800); var light = new THREE.AmbientLight(0xffffff); //模擬漫反射光源 light.position.set(600, 1000, 800); //使用Ambient Light時可以忽略方向和角度，只考慮光源的位置 scene.add(light); } function initObject(){ //初始化對象 //初始化地板 initFloor(); } function initGrid(){ //輔助網(wǎng)格 var helper = new THREE.GridHelper( 1000, 50 ); helper.setColors( 0x0000ff, 0x808080 ); scene.add( helper ); } function initFloor(){ //創(chuàng)建一個立方體 var geometry = new THREE.BoxGeometry(80, 20, 80); for ( var i = 0; i < geometry.faces.length; i += 2 ) { var hex = Math.random() * 0xffffff; geometry.faces[ i ].color.setHex( hex ); geometry.faces[ i + 1 ].color.setHex( hex ); } var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} ); //將material材料添加到幾何體geometry var mesh = new THREE.Mesh(geometry, material); mesh.position = new THREE.Vector3(0,0,0); scene.add(mesh); } //初始化頁面加載 function threeStart(){ //初始化渲染器 initThree(); //初始化場景 initScene(); //初始透視化相機(jī) initCamera(); //初始化光源 //initLight(); //模型對象 initObject(); //初始化網(wǎng)格輔助線 initGrid(); //renderer.render(scene, camera); //實(shí)時動畫 animation(); } /* * 旋轉(zhuǎn)原理 * 相機(jī)圍繞y軸旋轉(zhuǎn) * 不斷修改相機(jī)x、z軸位置，并且保持場景中的物體一直再相機(jī)的視野中， * 實(shí)時將相機(jī)拍攝下來的圖片，放到瀏覽器中去顯示 */ function animation(){ //渲染成像 var timer = Date.now()*0.0001; camera.position.x = Math.cos(timer)*100; //相機(jī)位置x軸方向 camera.position.z = Math.sin(timer)*100; //相機(jī)位置y軸方向 //設(shè)置相機(jī)視野中心 camera.lookAt(scene.position); //渲染成像 renderer.render(scene, camera); //渲染回調(diào)animation函數(shù) requestAnimationFrame(animation); }

至此完畢，附上個人繪制思路流程圖

Three.js基礎(chǔ)的示例分析

感謝各位的閱讀！關(guān)于“Three.js基礎(chǔ)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：Three.js基礎(chǔ)的示例分析
文章位置：http://weahome.cn/article/iigsph.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Three.js基礎(chǔ)的示例分析

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管