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