WEBGL学习笔记(一):创建场景

游戏已经做好,但是博客园不能支持哈,我在我的独立博客里面加入了这个游戏。

 

加载时候会黑屏,等待数秒即可,点击这里体验试玩:FlappyBird3d游戏试玩

 

 

初衷:最近在学习webgl,翻译一下用户帮助文档,希望对大家有所帮助!
(进了一个什么webgl中文网的qq群,问了一个问题,一句话能解决的就是拖着你,最后说没时间为你解答,真是醉了,骂了两句人就走人了,老子自己来!为什么骂人?因为不爽)
好了,不开心的事情不说了,开始翻译:-D。

 

制造一个场景(scene)

这节的目标就是大致介绍一下Three.js,我们从建立场景scene开始,场景中由一个旋转的立方体cube,最下面是一个例子,可以给你研究研究,万一你卡住了或者需要帮助就看看吧!
 

我们开始之前(还有前戏...)

 

 

 

我们开始使用Three.js之前, 你需要显示它。 保存下面的html到你的电脑上, 同时复制一份 three.js 在 js/ 目录中,打开我们的浏览器(其实就是打开html呗!)
<!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>

 


就这样!,下面所与的code都放进空的 <script> 标签里就行了!(下面就都是js了)
 

创建场景(Creating the scene)

 

 

 

为了实际上能够显示所有的东西,我们需要3个东西:场景scene, 相机camera, 渲染器renderer;
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,这里就是魔法发生的地方(好能吹),和我们使用的WebGLRenderer一起,还有别的,用来旧的浏览器或者其他因为某些原因不具备webgl的浏览器准备的。(都是废话)

我们在创建渲染器renderer对象的同时,我们需要决定设定我们呈现app的尺寸(嗯,尺寸~)。我们就用宽和高定义了呈现(或者叫渲染,都一样嘛~)的尺寸,这非常好(自卖自夸,不过好像还不错?)。

这个示例里,我们就用浏览器的宽度和高度。对于弱鸡配置的电脑,你也可以考虑使用小尺寸,比如(window.innerWidth/2window.innerHeight/2) 这样就是屏幕的一半了(废话!)
 
如果你希望保持你的app的尺寸, 但是还想要流场什么的(想多了吧~), 你可以调用 setSizeupdateStyle设为false. 例如 setSize(window.innerWidth/2, window.innerHeight/2, false)
那么这样你的app就用一半的分辨率,还可以全屏显示!(这什么鬼( ⊙ o ⊙ )啊!)
最后呢,我们把渲染器render添加到html文档中,在<canvas>中显示渲染的场景。
 
所有的一切都很好啊!但是你说的立方体在哪呢?我们现在加上它(这自问自答也没说了啊)"That's all good, but where's that cube you promised?" Let's add it now.
 
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)的对象。我们将来再好好展开说它。(哎呦喂)

除了几何,还有材质,Three.js有好几种不同的材质,但是我们现在还是用MeshBasicMaterial吧,所有材质都用对象的属性的形式应用到几何上,为了简单(原文是非常简单~),我们这里就用颜色材质, 0x00ff00,没错就是绿色。这和css或者ps中使用的是一样的颜色格式。
(普及一下16进制颜色和rgb的区别,256=FF;16进制的FF就是256(算错了么?!),0x00ff00=rgb(0,256,0),前面那个0x是透明度吧,反正我不改就是了)
 
还有就是网格mesh了,网格就是我提的几何结构,我们需要把材质应用到网格上面(就是贴图呗),然后把网格放到场景中,在附近自由的移动(现在并不能移动啊,扯什么蛋呢)。
 
默认的, 当我们调用 scene.add()方法,几何结构就放在(0,0,0),这可能到之挡住摄像机了,我们就把摄像机往外挪一点。(薛之谦:别当我镜头啊喂!)

 

渲染场景

 

 

 

如果你把之前的html副本放到文件里打开,你就会发现什么都没有!(哦,好神奇!)这是因为我们还没有渲染呢(忽略废话保智商→。→),要渲染我们需要调用一个渲染循环render loop.
function render() { 
requestAnimationFrame( render );
renderer.render( scene, camera );
}

render();

 

(不就是写了一个所谓的渲染循环,然后调用了一下吗)

这会产生一个循环,让渲染器1秒渲染60次(渲染器辛苦了!)
如果你是做浏览器游戏的新手, 你可能会问 "为什么不用setInterval? 事实上- 我们可以,但是 requestAnimationFrame 有许多优点. 也许最重要的一个就是当用户去别的页面之后他会自己暂停,这样就不会浪费性能和电池拉!(就是说你还是太嫩了!too young!)
 
 

让立方体动起来(Animating the cube)

 

 

 

着这之前,你把之前所有的代码都插入了文件中,你应该能看见一个绿色的箱子(box). 让我们来转动它!
在调用的 renderer.render 下面你添加下面的功能:
 
cube.rotation.x += 0.1; 
cube.rotation.y += 0.1;

 

 

这将会在60秒一次的框架内运行, 给立方体cube一个漂亮的旋转动画. 基本上,你现在app上想做的任何移动或者改变都要在render loop中来写(好吧,还是挺有用的),当然你也可以在这里呼叫其他的函数,这样你就不用在render函数里面写的太多了。
 

结果

 

 

 

祝贺! 你已经完成了你的第一个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>

 

by 早一步是财富 2016年7月7日12:16:56

posted @ 2016-07-07 12:14  早一步是财富  阅读(1830)  评论(0编辑  收藏