WEBGL学习笔记（一）：创建场景
游戏已经做好，但是博客园不能支持哈，我在我的独立博客里面加入了这个游戏。
加载时候会黑屏，等待数秒即可，点击这里体验试玩：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
