Three.js基礎(chǔ)部分學(xué)習(xí)
一、關(guān)于使用Three.js幾點(diǎn)理論說明
1.請(qǐng)參考官網(wǎng)地址 https://threejs.org/
2.使用three.js必備條件 <場(chǎng)景 A scene、相機(jī)a camera、渲染器 a renderer 三者缺一不可>
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.
3.場(chǎng)景 A scene、相機(jī)a camera、渲染器 a renderer 三者之間的關(guān)系 <渲染器的作用就是將相機(jī)拍攝下來(lái)的圖片,放到瀏覽器中去顯示>
三、案例使用Three.js繪制旋轉(zhuǎn)立方體
實(shí)現(xiàn)效果圖如下所示
案例案例源碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用threejs構(gòu)建室內(nèi)模型</title> <style> #canvas-frame { width: 100%; height: 600px; } </style> </head> <body onload="threeStart()"> <div id="canvas-frame" ></div> </body> <script type="text/javascript" src="./lib/three.js" ></script> <script type="text/javascript"> 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); } //初始化場(chǎng)景 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時(shí)可以忽略方向和角度,只考慮光源的位置 scene.add(light); } function initObject(){ //初始化對(duì)象 //初始化地板 initFloor(); } function initGrid(){ //輔助網(wǎng)格 var helper = new THREE.GridHelper( 1000, 50 ); helper.setColors( 0x0000ff, 0x808080 ); scene.add( helper ); } function initFloor(){ //創(chuàng)建一個(gè)立方體 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); } //初始化頁(yè)面加載 function threeStart(){ //初始化渲染器 initThree(); //初始化場(chǎng)景 initScene(); //初始透視化相機(jī) initCamera(); //初始化光源 initLight(); //模型對(duì)象 initObject(); //初始化網(wǎng)格輔助線 initGrid(); renderer.render(scene, camera); //實(shí)時(shí)動(dòng)畫 //animation(); } 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); renderer.render(scene, camera); requestAnimationFrame(animation); } </script> </html>
一.場(chǎng)景 場(chǎng)景就是一個(gè)三維空間。 用 [Scene] 類聲明一個(gè)叫 [scene] 的對(duì)象。
二.關(guān)于上述案例中PerspectiveCamera透視相機(jī)注意點(diǎn)說明
1. 照相機(jī)默認(rèn)的觀察方向是指向z軸負(fù)方向(就是朝向屏幕),所以當(dāng)變化坐標(biāo)以后,就要將照相機(jī)指向原點(diǎn),才能觀察到物體。
2.利用 lookAt 方法來(lái)設(shè)置相機(jī)的視野中心。 「lookAt()」的參數(shù)是一個(gè)屬性包含中心坐標(biāo)「x」「y」「z」的對(duì)象。
3.案例中使用透視相機(jī)(從視點(diǎn)開始越近的物體越大、遠(yuǎn)處的物體繪制的較小的一種方式、和日常生活中我們看物體的方式是一致的。)
4.設(shè)置相機(jī)的上方向?yàn)檎较騳軸 camera.up.x = 0; camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸camera.up.z = 0;
camera.up.x = 0; camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸 camera.up.z = 0;
三.關(guān)于透視相機(jī)相關(guān)參數(shù)說明
new THREE.PerspectiveCamera(fov, aspect , near,far) 透視相機(jī)
視野角:fov 這里視野角(有的地方叫拍攝距離)越大,場(chǎng)景中的物體越小,視野角越小,場(chǎng)景中的物體越大
縱橫比:aspect
相機(jī)離視體積最近的距離:near
相機(jī)離視體積最遠(yuǎn)的距離:far
上述案例動(dòng)畫原理 相機(jī)圍繞y軸旋轉(zhuǎn),并且保持場(chǎng)景中的物體一直再相機(jī)的視野中,實(shí)時(shí)將相機(jī)拍攝下來(lái)的圖片,放到瀏覽器中去顯示
function animation(){ //相機(jī)圍繞y軸旋轉(zhuǎn),并且保持場(chǎng)景中的物體一直再相機(jī)的視野中 //實(shí)時(shí)渲染成像 var timer = Date.now()*0.0001; camera.position.x = Math.cos(timer)*100; camera.position.z = Math.sin(timer)*100; camera.lookAt(scene.position); renderer.render(scene, camera); requestAnimationFrame(animation); }
四.渲染器 三維空間里的物體映射到二維平面的過程被稱為三維渲染。 一般來(lái)說我們都把進(jìn)行渲染的操作叫做渲染器。
【參考資料】
http://www.hewebgl.com/article/getarticle/50
http://www.xyhtml5.com/threejs-star-moving-particles.html
https://read.douban.com/reader/ebook/7412854/
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
一份老外寫的XMLHttpRequest代碼多瀏覽器支持兼容性
一份老外寫的XMLHttpRequest代碼多瀏覽器支持兼容性...2007-01-01原生JS實(shí)現(xiàn)實(shí)時(shí)鐘表
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)實(shí)時(shí)鐘表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫的圖片時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04jsp js鼠標(biāo)移動(dòng)到指定區(qū)域顯示選項(xiàng)卡離開時(shí)隱藏示例
jsp js 鼠標(biāo)移動(dòng)到指定區(qū)域顯示選項(xiàng)卡示例,離開時(shí)隱藏,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以了解下哈,希望對(duì)你有所幫助2013-06-06js 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)
下面小編就為大家?guī)?lái)一篇js 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-08-08