Ming-Zhe

First Journey In WebGL(二)

承接上次讲述,这次我们要实现一个功能。在程序中引入一个obj文件,在页面中以三维形式展现出来。并且,实现互动式的三维旋转,即随着鼠标的移动,图像在三维立体空间里进行相应的动作。


引入相关js文件

1
2
3
4
5
6
7
8
9
<body>
<script src="Three.js"></script>
<script src="OBJLoader.js"></script>
<script src="Detector.js"></script>
<script src="RequestAnimationFrame.js"></script>//最大可能的兼容老版本浏览器
<script>
// your code here
</script>
</body>

所有的js文件在源码中都能找到,在 OBJLoader.jsexamples/js/loaders/ 中。


OBJLoader.js

这个是我们主要用的一个js模块,它实现了我们所要的引入obj文件的功能。

1
2
3
4
5
var loader = new THREE.OBJLoader();
loader.load( "1.obj", function ( object ) {
2object.position.y = -30;
2scene.add( object );
} );

代码浅显易懂,基本没什么好说的。


设定环境光和直接光源

1
2
3
4
5
6
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );

three.js提供了多种环境光和光源可供选择。从官网或者github下载原文件后,里面的doc有全部的解释,其实玩javascript是一个体力活,相信你也发现了。


设置动画效果

1
2
3
4
5
6
7
8
9
10
11
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}

requestAnimationFrame() 的主要作用是,当此时页面所在浏览器的tap或者window不可见时,就停止渲染,这样更加节省系统资源和电量。在 render() 中,有两个全局变量 mouseXmouseY ,需要添加监听器进行监听,随时改变 camera 的位置,从而实现动态图像的动态显示。下面来添加监听器。


添加监听器

1
2
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );

相应的响应函数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}

这里还添加了另外一个监听器,是用来相应窗口变化,这也是为了适应多种显示器比例不同,以及在浏览过程中窗口大小变化,物体总是呈现在窗口的正中间。


最后,全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="Three.js"></script>
<script src="OBJLoader.js"></script>
<script src="Detector.js"></script>
<script src="RequestAnimationFrame.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
scene.add( camera );
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
var loader = new THREE.OBJLoader();
loader.load( "1.obj", function ( object ) {
object.position.y = -30;
scene.add( object );
} );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>


注意

如果只写一个html文件并把所有的js文件引入进来,依然是无法在浏览器中显示的,这是许多浏览器为了安全性考虑,对于本地的html显示有所限制,具体原因还没有深究,有两种解决方案,一种是改变浏览器的配置,另一种是搭建一个本地服务器(推荐),这是用python搭建的方法。

$ python -m SimpleHTTPServer 8080

用node.js:

(sudo) npm install http-server -g

然后在任意目录下

http-server [-p] [端口号]

然后访问 localhost:8080,会进入到到自己搭建的本地服务器,就可以实现obj的引入了。


小结

WebGL还是内容还是相当丰富的,javascript更是如此,再多的教程也都只能作为抛砖引玉,真正的老师是谷歌,还有一个强大的资料库github,善用这两个资源,再到几个社区活跃一下,学技术很简单了。。。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

First Journey In WebGL(一)

由于一门课程的需要,要做一个三维可视化的presentation,想来想去,也就WebGL我还有点感兴趣,于是开始对这一领域的研究。这两天的时间也算是小有收获吧。在报告中我就是打算带着大家一起从零写一个WebGL程序的,让所有人也都感受一下这么一个创作的过程,再分享一下学习的经验。不过可能时间不够,就在这写吧。


three.js

要说玩WebGL怎么可能不说three.js,这可是对WebGL的完美封装。源码官网,要学three.js这两个地方是必去之处。我简单说一下three.js起步。


在进行开发之前

由于我们最终的结果是要呈现在web端,所有在在前端的展示框架要先搭建好,同时还要事先下载three.js文件,或者就像我这里一样,用three.js的官方cdn。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>


创建场景(scene)

用three.js呈现的内容需要3样元算:scene, camera, renderer .

1
2
3
4
5
6
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 );

解释一下,这里的 camera,我们使用的是 PerspectiveCamera(three.js还提供了很多其他类型的camera以供选择),它有4个参数,第一个表示视野大小;第二个表示成像比例,一般都是按照浏览器窗口比例来进行设定;第三和第四个分别是最远和最近的camera作用范围。下面的renderer比较容易理解,需要注意的是在最后要append到document中。

下面创建一个物体出来。

1
2
3
4
5
6
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

这里 CubeGeometry 为了创建一个 cube 出来,由 geometry 变量存储。除此之外还有需要 material 给我们的 cube 着色(同样的three.js由很多material可供选择)。然后就是 mesh 了,这个过程可以抽象的理解为融合过程,有了geometry和material融合后就是我们需要的最终 bject 了。最后把物体 add 进之前声明好的 scene 中去。

渲染(render)

1
2
3
4
5
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();

如果要深入解释 render 的原理,这就是另外一本书的内容了。。。这里,浏览器接到指令后,大概会做的事情就是每秒对要显示的内容进行60次着色。

制作动画效果

如果渲染出的图像不会动,可能也看不出三维效果来。因为我们用的只是一个生成的简单cube,本身是没有办法呈现出立体感的。所以我们加点动态以展示出,我们做的确实一个三维的object。

1
2
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;


最终代码展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.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.CubeGeometry(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>



这次先写这么多,下次介绍怎么再一个 WebGL 程序中 load 一个外部 obj 模型。哈哈,给力的实例来了。。。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com