標籤：asi 情境 意思 文字 utf-8 pos 部分 htm param
網頁3D效果庫Three.js初窺背景一直想研究下web頁面的3D效果，最後選擇了一個比較的成熟的架構Three.js下手
ThreeJs官網
ThreeJs-github;
接下來我會陸續翻譯 Three.js官網的文檔，部分文字和代碼為我個人添加。
這部分的目標是為Three.js做一個簡單的介紹，我們會以建立一個情境，一個旋轉的立方裡開始，文章的結尾會有一個可啟動並執行完整樣本為你解惑。
開始之前在你使用Three.js之前，你需要在你的電腦上建立檔案存放下面的html，並需要建立js目錄將three.js放入，開啟瀏覽器瀏覽。
<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> // Our Javascript will go here. </script> </body></html>好了，接下來的代碼都放進空的script標籤裡
建立情境事實上使用Three.js建立任何可顯示的效果，都需要三樣東西：情境，相機，渲染器，我們可以通過相機渲染情境.
var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);var renderer = new THREE.WebGLRenderer();renderer.setSIze(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement);讓我們花點時間解釋下上面的代碼做了些什麼，現在我們建立了情境，相機和渲染器
Three.js有幾種不同的相機，現在我們使用PerspectiveCamera.第一個屬性是視角，我們可以把相機理解為我們的眼睛, 第二個屬性是寬高比，你通常希望使用元素的寬度除以高度，或者理解為當你在一個寬屏電視上看一個老電影是也會得到這種結果－映像會被展開，接下來的兩個屬性是遠近剪下面，什麼意思呢？字面上意思是：物體遠離相機的far值或者比相機的near值還要近都不會被渲染! 看到這個我有點懵逼查了半天 投影矩陣 這篇文章講的大概能看懂是什麼意思。你現在不用擔心這個，但是你可能會在你的app裡使用其它值來達到更好的展現 ！
接下來時渲染器，這是最神奇的地方，除了WebGLRenderer之外在這裡使用其它的東西來相容老的瀏覽器活著不支援WebGl的瀏覽器。
除了建立renderer執行個體，我們還需要設定渲染的尺寸，最好使用瀏覽器的寬度高度來填充應用，考慮效能，你仍可以setSize小的values。比如:window.innerWidth/2和 window.innerHeight/2,這樣可以渲染半個螢幕
如果你想保持渲染的尺寸，但渲染在一個低解析度的裝置上，你可以調用setSize的updateStyle（第三個屬性）設定為false,比如 setSize(window.innerWidth/2, window.innerHeight/2, false) 這樣將會渲染在低解析度的裝置上但Canvas 100%顯示
最後，我們添加渲染元素到HTML文檔，這是一個canvas標籤的渲染器來展示情境
"這非常好，但是立方體呢" 讓我們繼續
var geometry = new THREE.BoxGeometry(1,1,1);var material = new THREE.MeshBasicMaterial({color:0x00ff00});var cube = new THREE.Mesh(geometry,material);scene.add(cube);camera.position.z = 5建立一個立方體，我們需要BoxGeometry，這是一個包含點，面，填充物的立方題對象，我們會在後面細細講。
除了geometry，我們還需要material給它上色，Three.js有許多的materia，但我們現在使用MeshBasicMaterial，所有的meterial需要一個對象的屬性將被應用，為了簡單其間，我們只支援顏色屬性0x00ff00綠色，跟css和photoshop的顏色一樣
第三個事是我們需要一個Mash，mash是一個對象需要一個geometry和一個material，然後我們可以插入到情境中，也可以自由移除，
預設情況下,當我們調用scene.add(),我們將添加到座標(0,0,0)。這將導致相機和cube在彼此內部。為了避免這種情況,我們將鏡頭移出一點。
渲染情境如果你從上面的代碼複製到我們建立的HTML檔案之前,您無法看到任何東西。這是因為我們還沒有呈現任何。為此,我們需要渲染迴圈
function render(){ requestAnimationFrame(render); renderer.render(scne,camera);}render();這將建立一個迴圈使渲染器每秒60次的頻率繪畫。如果你在寫瀏覽器遊戲,你可能會說“為什麼我們不建立一個setInterval ?其實我們是可以的,但requestAnimationFrame有許多優點。最重要的是當使用者導航到另一個瀏覽器選項卡它暫停,因此不浪費他們寶貴的處理能力和電池壽命。可以在控制台試試下面這段代碼，切換tab觀察！
function render(){ requestAnimationFrame(render);console.log(1);}render();如果將上面所有的代碼插入到我們開始建立的檔案上,您應該看到一個綠色的盒子。接下來讓它更有趣的旋轉。
添加下面的代碼到渲染器，調用renderer.render 在render函數裡
cube.rotation.x += 0.1;cube.rotation.y += 0.1;每一幀的運行(60次/秒),並使立方體旋轉動畫。基本上,任何你想要移動或改變應用程式運行時必須經過渲染迴圈。你當然可以調用其他函數,這樣你就不會得到一個數百行的渲染函數。
寫在最後恭喜你，你完成了你的第一個Three.js的應用，很簡單，但你有了個起點！
下面提供了完整的代碼，它可以讓你更好的理解它是如何工作的
<html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); </script> </body></html>本文翻譯於three.js/doc/Introduction/creating a scene
網頁3D效果庫Three.js初窺
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
