three.js配合SketchUp开发web JS3D项目

最近想在平板上做一个楼盘展示的东西，但猪哥就只会点JS，所以左思右想也只能用JS来做，好在目前HTML5已经发展相对成熟，所以WEB 3D这块相对来说也有一定积淀了。但性能还有待提高，昨天发现android chrome已经支持webgl，这是多么喜闻乐见的消息。

之前我是想用Sprite3D.js来做，但感觉这个始终不如意，而且文档甚少，之前android chrome并不支持webgl，所以three.js在上面根本运行不了，现在支持了，当然必须使用three.js了。

关于three.js的各种，大家自行谷歌即可。

我搜了几篇文章，大家可以参考参考。

简单的说，你就是需要这样：

1 <html>

2 <head>

`3`	`<title>My first Three.js app</title>`

`4`	`<style>canvas { width: 100%; height: 100% }</style>`

5 </head>

6 <body>

`7`	`<script` `src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>`

`8`	`<script>`

`9`	`// Our Javascript will go here.`

`10`	`</script>`

11 </body>

12 </html>

创建一个three.js容器。然后进行各种操作。

现在先来个DEMO吧。(你懂的，最好用chrome看)

http://www.findyourwaytooz.com/（低配电脑杀手，慎重打开，低配打开前先保存项目）

这些都是别人做好的DEMO，非常强大。

Three.js 支持多种格式的 3D 文件，比如Collada (.dae)文件，比如 three.js JSON 格式的文件。相关的模型操作可以参考网上的教程。

对于3DS MAX 、MAYA这些非常专业的软件，要做出一个非常好的模型是比较困难的，谷歌公司出品的SketchUp可以帮我们解决这个问题。我们只需要学习一些简单的光色知识以及V-ray这个强大的插件即可做出很好看的模型来。

在SketchUp中做如下操作。

1、点击菜单项文件 > 导出 > 3D模型...。
2、选择COLLADA文件（.DAE）。
3、如果你要导出纹理，执行一下贴图纹理检查。
4、单击导出。
SketchUp会创建一个名为your-model.dae的Collada文件和一个包含该模型的纹理素材的文件夹（以你的模型命名）。

接下来需要导入相应的JS文件

<scripttype="text/javascript"src="Three.js"></script>

<scripttype="text/javascript"src="ColladaLoader.js"></script>

ColladaLoader.js就是用来加载模型文件的。

导入模型：

`1`	`var` `loader =` `new` `THREE . ColladaLoader ();`

`2`	`loader . load (` `'path/to/your-model.dae'` `,` `function` `( result ) {`

`3`	`scene . add ( result . scene );`

4 });

这里要注意一下，这里是使用ajax加载的，所以在本地是看不了的。

哈哈，先分享到这里吧，其他的等猪哥再研究研究。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。