游戲已經做好，但是博客園不能支持哈，我在我的獨立博客里面加入了這個游戲。
加載時候會黑屏，等待數秒即可，點擊這里體驗試玩：FlappyBird3d游戲試玩
初衷：最近在學習webgl，翻譯一下用戶幫助文檔，希望對大家有所幫助！
（進了一個什么webgl中文網的qq群，問了一個問題，一句話能解決的就是拖着你，最后說沒時間為你解答，真是醉了，罵了兩句人就走人了，老子自己來！為什么罵人？因為不爽）
好了，不開心的事情不說了，開始翻譯:-D。
制造一個場景（scene）
我們開始之前（還有前戲...）
<!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>
創建場景（Creating the scene）
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 );
我們來花些時間解釋一下這里在做什么。我們現在新建（new）了一個場景scene,一個 相機camera,一個 渲染器renderer。在three.js中有好幾種不同的相機，現在我們使用透視相機PerspectiveCamera
PerspectiveCamera( 視角（0~180）, 寬高比, 近平面, 遠平面);
視角就像人眼睛睜開的大小。
寬高比就是4:3,16:9是什么的，你買顯示器應該懂，寬高比不合適可能會導致圖像變形。就好像你用寬屏顯示器播放老電影那種感覺！（一般就是寬除以高就行了！，除非你想搞big news！→_→）
近平面，遠平面，就是你設置的，超過遠平面的物體就不渲染了！近平面也是。（就是說只能看見中間的啦，人的眼睛太遠了不也看不清嗎:-D），現在不用管這些！看看原文怎么說的！
You don't have to worry about this now, but you may want to use other values in your apps to get better performance.（好吧我只是不知道怎么翻譯了/(ㄒoㄒ)/~~）
我們在創建渲染器renderer對象的同時，我們需要決定設定我們呈現app的尺寸（嗯，尺寸~）。我們就用寬和高定義了呈現（或者叫渲染，都一樣嘛~）的尺寸，這非常好（自賣自誇，不過好像還不錯？）。
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. 這是一個包含立方體的點(vertices) 和面(faces)的對象。我們將來再好好展開說它。（哎呦喂）
渲染場景
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
（不就是寫了一個所謂的渲染循環，然后調用了一下嗎）
讓立方體動起來（Animating the cube）
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
結果
<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>
by 早一步是財富 2016年7月7日12:16:56