Three.js基礎部分學習

更新時間：2017年01月08日 15:11:31 作者：Avenstar

本文主要分享了一個案例，介紹了使用Three.js繪制旋轉(zhuǎn)立方體的方法與實現(xiàn)過程。具有一定的參考價值，下面跟著小編一起來看下吧

一、關(guān)于使用Three.js幾點理論說明

1.請參考官網(wǎng)地址 https://threejs.org/

2.使用three.js必備條件 <場景 A scene、相機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.場景 A scene、相機a camera、渲染器 a renderer 三者之間的關(guān)系 <渲染器的作用就是將相機拍攝下來的圖片，放到瀏覽器中去顯示>

三、案例使用Three.js繪制旋轉(zhuǎn)立方體

實現(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);
 }
 //初始化場景
 var scene;
 function initScene(){
 scene = new THREE.Scene();
 }
 var camera;
 function initCamera() { //透視相機
 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; //相機朝向--相機上方為y軸
 camera.up.z = 0;
 camera.lookAt({ //相機的中心點
 x : 0,
 y : 0,
 z : 0
 });
 // camera 正交相機
 /*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; //相機朝向--相機上方為y軸
 camera.up.z = 0;
 camera.lookAt({ //相機的中心點
 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();
 //初始透視化相機
 initCamera();
 //初始化光源
 initLight();
 //模型對象
 initObject();
 //初始化網(wǎng)格輔助線
 initGrid();
 renderer.render(scene, camera);
 //實時動畫
 //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>

一.場景場景就是一個三維空間。用 [Scene] 類聲明一個叫 [scene] 的對象。

二.關(guān)于上述案例中PerspectiveCamera透視相機注意點說明

1. 照相機默認的觀察方向是指向z軸負方向（就是朝向屏幕），所以當變化坐標以后，就要將照相機指向原點，才能觀察到物體。

2.利用 lookAt 方法來設置相機的視野中心。「lookAt()」的參數(shù)是一個屬性包含中心坐標「x」「y」「z」的對象。

3.案例中使用透視相機（從視點開始越近的物體越大、遠處的物體繪制的較小的一種方式、和日常生活中我們看物體的方式是一致的。）

4.設置相機的上方向為正方向y軸 camera.up.x = 0; camera.up.y = 1; //相機朝向--相機上方為y軸camera.up.z = 0;

camera.up.x = 0;
camera.up.y = 1; //相機朝向--相機上方為y軸
camera.up.z = 0;

三.關(guān)于透視相機相關(guān)參數(shù)說明

new THREE.PerspectiveCamera(fov, aspect , near,far) 透視相機

視野角：fov 這里視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大

縱橫比：aspect

相機離視體積最近的距離：near

相機離視體積最遠的距離：far

上述案例動畫原理相機圍繞y軸旋轉(zhuǎn)，并且保持場景中的物體一直再相機的視野中，實時將相機拍攝下來的圖片，放到瀏覽器中去顯示

function animation(){
 //相機圍繞y軸旋轉(zhuǎn)，并且保持場景中的物體一直再相機的視野中
 //實時渲染成像
 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);
}

四.渲染器三維空間里的物體映射到二維平面的過程被稱為三維渲染。一般來說我們都把進行渲染的操作叫做渲染器。

【參考資料】

http://www.hewebgl.com/article/getarticle/50

http://www.xyhtml5.com/threejs-star-moving-particles.html

https://read.douban.com/reader/ebook/7412854/

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: