[转]three.js和webGL

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

复制代码

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

1. 1.        loader = new THREE.JSONLoader(true);
   
2. 2.        loader.load({ model: "js/objects/car_body.js", callback: function ( geometry ) { addPart(geometry, 0, 150, 0, carBodyMat)}});
   
3. 3.        loader.load({ model: "js/objects/chrome.js", callback: function ( geometry ) { addPart(geometry, 0, 150, -17, chromeMat)}});
   
4. 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：所有的资源都可以在这里找到。