Three.js

最近貌似Node又有了新的fork ayo.js(怎么读!哎呦?),加之前端一不留神就出框架的节奏,在2016年就开始用Next(wtf!你能看出来其是一个前端框架?)来命名,以后恐怕就得future.js、plus.js的节奏…贵圈真乱啊!

当然当然,这和我们今天的主角three.js并没有太大的关系,比起这些看了名字不知所云的xxx.js,Three.js这个就和明显了,其是一个3d JavaScript库,更准确的说是用JavaScript编写的WebGL三方库,那么什么是WebGL呢?这个我不解释,有兴趣的小伙伴可以去探索。

作为我最想学却一直学不会的技术之一,WebGL的确对于大部分的前端猿们来说有些复杂和繁琐了,早些时候我花了大量的时间去啃API,学习如何使用,可到目前脑子还是一团乱麻。既然这样的话,我们得另辟蹊径,不能因为有困难就放弃学习不是!所以我了解到了Three.js,其化繁为简,做同样的事,其只需要少于1/5的代码量就可以完成,并且API也十分通俗易懂,学习难度降低了不少,可以让我们关注使用WebGL创造而不是痛苦的学习和编码。

如果你还不理解WebGL是什么,这是官方文档上的原话:

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 canvas elements.

如果你对Three.js比较有兴趣的话可以直接进去官网,其中首页展示了很多featured projects,个人比较喜欢这个Paper Planes

你也可以去gayhub把Three.js代码download下来,里面有很多很多(大约几百个例子)可供学习,当然如果你想学习Three.js,来百度云下载,这是目前少有的全方面介绍Three.js的书籍。

好了,差不多介绍完该跑了。但是我好想发现了我竟然连副标题都没取,好吧,还是再多讲一会儿,为了彰显Three.js的简单易用的特性,我讲决定再写一个全面但是简单的例子,并且配上必要的讲解。

例子?不存在的!

这是一个很小的例子,它将会展示Three.js使用流程,并且是经过测试没有错误(也许有!),请放心食用。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>使用Three.js</title>
<script src='./three.js'></script>
</head>
<body>
<div id="three-container"></div>
<script type='text/javascript'>
// three.js中有几个非常重要的知识点,为了构成一个3D程序,我们至少需要以下几部分。
// 1. Scene 场景,用于承载一些必要元素
let scene = new THREE.Scene();
// 2. Camera 相机(此相机非你想的那个相机哦!)
// Three.js中提供了两种相机,透视相机和正交相机,这里使用的是透视相机(类似于人眼看到的)
let camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerWidth, 1, 1000);
camera.position.set(-20, 40, 20);
// 3. renderer 渲染器, 也可以在canvas中渲染,但是复杂场景可能有性能问题
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x708090);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
// 4. 物体
let cubegeo = new THREE.CubeGeometry(10, 10, 10);
// 5. 材质 用于物体表面,不同材质包含不同特性,可设置颜色等。
let material = new THREE.MeshLambertMaterial({
color: 0xffffff
});
// 组合物体与材质成为一个网格
let cube = new THREE.Mesh(cubegeo, material);
// 设置物体能够产生光源阴影
cube.castShadow = true;
scene.add(cube);
// 6. 光源 Three.js中存在多种光源
let light = new THREE.SpotLight(0xfffff);
light.position.set(-30, 40, -20);
light.castShadow = true;
scene.add(light);
// 设置相机看向场景远点(空间坐标系原点)
camera.lookAt(scene.position);
// 添加到HTML中
document.getElementById('three-container').appendChild(renderer.domElement);
// 为了更加直观,这里设置一下空间坐标系
let axes = new THREE.AxisHelper(30);
scene.add(axes);
// 动起来吧!添加动画
function animation() {
// 比如移动转动方块, 这里设置在x、y轴转动平面
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
requestAnimationFrame(animation);
renderer.render(scene, camera);
}
requestAnimationFrame(animation);
</script>
</body>
</html>

尾巴

即使是这样一个简单的例子,我如今也没有办法在不参考官方文档的情况下一口气写下来,原因无非在于,虽然其简化了开发,但是概念还是偏多并且需要记住每个API也是在有难度。

但是,如果我们能够十分清楚的理解制作3D应用的流程,至少是使用Three.js的流程,按照流程十分有条理的写下去,代码总归是十分清晰的。

time waiting for no one,这是我最近在看《穿越时空的少女》看到的。对啊,时间不等人,珍惜好为说不多的’自由’而’枯燥’的时间吧!

分享到 评论