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

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

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

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

http://www.cnblogs.com/yiyezhai/archive/2013/01/21/2863552.html

http://www.tuicool.com/articles/6faaUb

简单的说,你就是需要这样:

<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>
		<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>


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

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

http://www.bojinxiaozhu.com/demo/three.js/#webgl_buffergeometry_lines_indexed

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就是用来加载模型文件的。

下载地址为:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/ColladaLoader.js

导入模型:


var  loader  =  new  THREE . ColladaLoader (); 
loader . load ( 'path/to/your-model.dae' ,  function  ( result )  { 
  scene . add ( result . scene ); 
});


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

\\\\\\\

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