要看到如上图的例子你必须要有一个最新的支持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);
- 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)}});
不管怎样,就像我之前有说的,我真的感到很兴奋,不光是因为整个过程很简单,也是为做出的 效果挺炫。比如很明显地可以看出,这个模型车的车身材质比molehill例子里要更有金属光泽。但让我大为惊讶的其实是,以我之前用webGL的经验来看,它的表现是不会这么完美的。这个例子做到的效果却比我在很撇的笔记本上做的molehill例子要好很多很多,当然,马上你就会发现,运行这个webGL的时候你的显卡一直在做大量的运算。
就总体来说,个人觉得还是OK的。
PS:所有的资源都可以在 这里找到。