三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

(Three.js) 页面展现3D模型
作者:Neoxone    发表时间: 2012年02月24号,星期五     阅读:47,214 次

CSS3的3d-Transform,Canvas,SVG,WebGL等等技术的出现和发展,正将网页的3D化慢慢变得简单友好,但是3D建模毕竟有其很高的专业性,所以如果拥有一个内心强大,接口简洁的库就能使我们得心应手许多。Three.js便是备受推崇的一个,尽管API的变动,简陋的文档会让我们的上手比较困难。

下面我提供一个入门Demo,及一个用Three.js展示通用的3D模型格式的Demo。(注意:确保你使用的浏览器支持了Canvas,及WebGL。拥有一个先进的浏览器,将为你带来更好的上网体验。Test

下面是入门Demo,加了注释。详细入门教程可以到这里Getting Started with Three.js

考虑到Opera还不支持WebGL,上面使用了Canvas模式渲染。但WebGL的渲染模式要比Canvas快的要多的多。

下面是一个展示机器人MGA-411 Mangusa模型的Demo。
Three.js可以调用以Json格式存储模型信息的js文件来创建模型。模型你可以自己在3D软件上建模完成,或在网上下载。至于模型格式,你可以通过three.js提供的插件在Blender这款开源3D制作软件中将一些3D模型格式,如3ds,obj等,转换成符合three.js标准的js格式。

标签: , , , , ,

23 条评论 发表在“(Three.js) 页面展现3D模型”上

  1. 说:

    博主,看了你的three.js教程后觉得帮助很大.我现在正在利用three.js做毕设,但是有一些地方没有明白,可以向您请教吗?我QQ是170119566

    回复

  2. 高级豕 说:

    说的甚有道理,但总觉得有点偏激。

    回复

  3. 乌鸦 说:

    lz,我想问下,我按照你写的用Blender这款开源3D制作软件中将一些3D模型格式,如3ds,obj等,转换成符合three.js标准的js格式,但是在网页中显示的模型很粗糙,失真很严重,不会像你的保持本身的样子,你知道原因吗?

    回复

    ONEBOYS 回复:

    @乌鸦, 不清楚,你可以试试在网上下3ds等模型来转换,排除是你模型本身数据的问题。

    回复

  4. 张云飞 说:

    楼主你好,请问如何贴图?鼠标滑轮控制模型放大缩小,以改变摄像机的远近来实现是否合理?

    回复

    ONEBOYS 回复:

    @张云飞, 我也认同改变摄像的机远近来表现缩放效果。至于贴图,你需要了解Material相关的API,如第二个demo里使用的MeshLambertMaterial方法,可以改变几个参数达到不同的效果。而材质贴图可以用ImageUtils 来引入。官网上有大量的demo涉及到了材质,贴图。

    回复

  5. xiaoli 说:

    3D模型导入的代码 我在本地要怎么运行啊?

    回复

    子木 回复:

    @xiaoli,

    回复

  6. hehe 说:

    ):10:( ):10:( ):10:( ):10:( ):10:( ):10:( ):10:( ):2:( ):2:( ):20:( ):20:( ):20:( ):20:( ):20:( ):20:( ):20:( ):20:( ):20:( ):20:( ):20:( ):20:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):5:( ):7:(

    回复

    hehe 回复:

    @hehe, ):4:( ):5:( ):5:( ):4:(

    回复

  7. asa 说:

    楼主您好,第二个例子显示不出来啊,第一个可以正常显示,求解答,非常感谢

    回复

    ONEBOYS 回复:

    第二个例子的模型数据很大,可能网络原因导致下载失败。你可以试试把源代码和模型下载到本地跑跑看

    回复

    ONEBOYS 回复:

    或者多换几个浏览器试试,因为第一个用的是canvas,而第二个是webGL

    回复

  8. soredsun 说:

    楼主你第二个例子一下子让我知道我项目怎么做了,必须顶你

    回复

  9. Echo 说:

    例子二的模型源码在哪呀 怎么下载

    回复

  10. Echo 说:

    博主知道怎么直接基于webgl绘制.off文件的3D模型吗

    回复

  11. 追风少年 说:

    楼主很棒!有帮助!

    回复

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(