在本篇章之中，我會介紹大家一些WebGL以及一些3D物件上的基礎知識以及實際寫一個基礎DEMO程式。
一. WebGL :
WebGL 是基於openGL ES2.0下的演示引擎，並且可透過 HTML5 的 Canvas元素當作DOM的訪問接口。
二. Three.js：
Three.js是一個3D javaScript 引擎base on WebGL的，使用他的好處是有現成強大的元件功能，即便遇到了three.js沒有現成元件，開發者也能透過WebGL引擎建立，且兩者之間不會有衝突。
官方網站上有許多的範例，有興趣的朋友可以點以下連結
http://threejs.org/
三.環境設定：如果您的環境已經設定好了可以跳過此步驟
1.下載 https://github.com/mrdoob/three.js/tree/master/build，解壓縮後會得到兩個lib檔案three.js、three.min.js，前者適用於開發階段，後者為壓縮檔適用於發佈後使用。
如果你覺得很麻煩也可以透過CDN import three.js lib:
<script src="http://threejs.org/build/three.min.js"></script>
四.主程式撰寫：
一個完整的Three.js專案中必定會有（如果有開發其他平台下的OpenGL專案，其邏輯是一樣的）：
1.渲染器：Renderer
2.攝影機：Camera
3.場景：Scene
4.場景內的物體：Content (ex. cube 、sphere、custom object等)
如果當專案run起來沒看到東西可以從這四個方向下手 Debug。
程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Hello Three.js</title>
<div id="area"></div> <!--宣告一個3D Scene在網頁內的範圍-->
<script src="http://threejs.org/build/three.min.js"></script><!-- 引用 three.js lib-->
</head>
<body>
<script>
var area = document.getElementById('area');//指定一個變數
var width = window.innerWidth,// 取得 視窗的寬與高
height = window.innerHeight;
var scene = new THREE.Scene(); //宣告場景
var renderer = new THREE.WebGLRenderer(); //宣告一個渲染器
renderer.setSize(width, height);
//宣告攝影機並設定位置，在此使用透視相機其原理會在後面章節講解
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 800);
camera.position.set(0, 0, 5);
//宣告一個 Cube的幾何圖形
var cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(camera); //場景加載camera
scene.add(cube); //場景加載 content ( 此範例是宣告一個 cube的幾何物件)
renderer.render( scene , camera );
area.appendChild(renderer.domElement);
</script>
</body>
</html>
秀出結果：
下一篇 我們來實作添加動畫的 3D Project
沒有留言:
張貼留言