一、關于使用Three.js幾點理論說明
1.請參考官網地址 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 三者之間的關系 <渲染器的作用就是將相機拍攝下來的圖片，放到瀏覽器中去顯示>
三、案例使用Three.js繪制旋轉立方體
實現效果圖如下所示
案例案例源碼
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>用threejs構建室內模型</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--這里使用環境光 //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(){ //輔助網格 var helper = new THREE.GridHelper( 1000, 50 ); helper.setColors( 0x0000ff, 0x808080 ); scene.add( helper ); } function initFloor(){ //創建一個立方體 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(); //初始化網格輔助線 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] 的對象。
二.關于上述案例中PerspectiveCamera透視相機注意點說明
1. 照相機默認的觀察方向是指向z軸負方向（就是朝向屏幕），所以當變化坐標以后，就要將照相機指向原點，才能觀察到物體。
2.利用 lookAt 方法來設置相機的視野中心。 「lookAt()」的參數是一個屬性包含中心坐標「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;
三.關于透視相機相關參數說明
new THREE.PerspectiveCamera(fov, aspect , near,far) 透視相機
視野角：fov 這里視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大
縱橫比：aspect
相機離視體積最近的距離：near
相機離視體積最遠的距離：far
上述案例動畫原理 相機圍繞y軸旋轉，并且保持場景中的物體一直再相機的視野中，實時將相機拍攝下來的圖片，放到瀏覽器中去顯示
function animation(){ //相機圍繞y軸旋轉，并且保持場景中的物體一直再相機的視野中 //實時渲染成像 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/
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
