[转]three.js和webGL

最新推荐文章于 2024-07-16 12:12:53 发布

原创最新推荐文章于 2024-07-16 12:12:53 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#框架 #Chrome #浏览器 #Python #json

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文分享了作者使用Three.js框架结合WebGL技术创建3D模型的过程与心得。作者通过对比Molehill版本的Away3D，展示了如何利用Three.js简化开发流程并提升渲染效果。

http://bbs.9ria.com/viewthread.php?tid=77910&extra=page%3D1%26amp%3Borderby%3Ddateline%26amp%3Bfilter%3D2592000

要看到如上图的例子你必须要有一个最新的支持webGL的浏览器。
正如我在上一个帖子里提到的，我在用Molehill版本的Away3D实现了一个小作品之后，我很想在webGL里重新做一个相同的东西出来。所以当我知道了有一个很棒的支持Javascript的3D引擎来实现webGL之后，我就决定去试试，出来的结果也让我很兴奋。

首先，开发过程比我预想的要简单很多。Three.js是一个很出色开发框架，下载下来的时候就包含了所有的资源文件和被缩小了的构建文件。所以要找到哪个函数是可以用的简直易如反掌。并且这个框架也包含了许多很棒的实例，从最基本的立方体模型实例到包含很多模型的复杂webGL实例，它都有。

我现在的要做的事情就比之前做molehill实例的时候简单多了，因为我已经有了建立好的模型，随时准备开始了。所以在这里我只要把模型导入到three.js接着展示到浏览器里就好了。如果你之前在AS3里有用过Papervision3D 或者 Away3D，你将会对这个框架结构非常熟悉，因为它用到了相同的方法来创建场景、摄像机、灯光、渲染器等。又因为在这里我要实现webGL实例，所以我用了WebGLRender。但是如果浏览器不支持webGL，你也可以选择CanvasRenderer。

1. camera = new THREE.Camera(70, window.innerWidth / window.innerHeight, 1, 1000);
2. camera.position.y = 150;
3. camera.position.x = 500;
4. camera.target.position.y = 150;
5.
6. renderer = new THREE.WebGLRenderer();
7. renderer.setSize(window.innerWidth, window.innerHeight);
8. container.appendChild(renderer.domElement);
9.
10. car = new THREE.Object3D();
11. scene.addObject(car);

复制代码

这些代码被添加进去之后，就只需要再载入对象和指定材质了。多亏three.js框架考虑得很周全，它有很多针对不同3D模型的扩展插件。因为我用的是Blender 3D来制作模型，我只需要安装一个插件之后从Blender里导出模型的各个部分作为.js文件，然后准备导入到我的场景中。Three.js有其他一些可用的方法，比如通过python scripts来把导出的obj文件转换成支持.js文件的.bin文件，或者就干脆转换成普通的.js文件。但就我个人而言，我更喜欢直接从Blender里导出的方法。

1. loader = new THREE.JSONLoader(true);
2. loader.load({ model: "js/objects/car_body.js", callback: function ( geometry ) { addPart(geometry, 0, 150, 0, carBodyMat)}});
3. loader.load({ model: "js/objects/chrome.js", callback: function ( geometry ) { addPart(geometry, 0, 150, -17, chromeMat)}});
4. loader.load({ model: "js/objects/glass.js", callback: function ( geometry ) { addPart(geometry, 0, 172, 91, glassMat)}});

复制代码

通过不断创建THREE.JSONLoader 对象和调用load()函数导入我的模型车的每个部分到场景中是很容易的，因为load()函数在模型文件导入的时候就会自动地调用call back函数来把模型添加到场景中而不需要设定 listeners等等繁琐的东西。我碰到的惟一问题是在Blender里设定好的各个模型所在的位置坐标在导入到场景中后全部被清零，所以需要自己来重新设定每个部分的位置。所以有些部分可能有些错位，但我觉得总体还看得过去。

不管怎样，就像我之前有说的，我真的感到很兴奋，不光是因为整个过程很简单，也是为做出的效果挺炫。比如很明显地可以看出，这个模型车的车身材质比molehill例子里要更有金属光泽。但让我大为惊讶的其实是，以我之前用webGL的经验来看，它的表现是不会这么完美的。这个例子做到的效果却比我在很撇的笔记本上做的molehill例子要好很多很多，当然，马上你就会发现，运行这个webGL的时候你的显卡一直在做大量的运算。

就总体来说，个人觉得还是OK的。

PS：所有的资源都可以在这里找到。