使用Three.js + Blender构建在浏览器端显示的3D模型(1)
前言
前端3D效果的展示方法很多,如果简单的显示一个立方体,我们可以用六块div,每块div结合CSS的旋转特性,旋转出不同的角度组装出来一个盒子。当我们拖拽这个盒子的时候,可以用JS根据鼠标新的坐标点刷新那六个div新的旋转角度参数,让六个面始终同步旋转,始终是闭合的,所以视觉效果来看是3D的。
上述方法适用于简单的3D模型,比如立方体、长方体等。其特点是,各种控件都支持这种css旋转,比如我们可以把一个iframe做出3D的旋转效果,同时不影响iframe上网页内容的操作,这是比较酷的。但是对于一些更注重细节的3D模型,则很难用css特性来实现。也许我们可以用更多的,粒度更小的div来组装,但缺乏配合这种方法的3D建模工具,只凭经验去拼凑,注定很难适应各种需求。所以我们选择Three.js来实现对3D模型的展示。Three.js提供了一些API,能够在场景里创建一些常见的几何体,比如长方体、球体等。但实际应用的时候,我们更多的是结合一些3D建模软件生成定制的3D模型,然后用Three.js加载显示。
3D建模软件选择blender是因为这是一个开源免费的软件,官网:www.blender.org。 Thee.js 当然也是一个开源项目,项目位置:https://github.com/mrdoob/three.js/
第一章 Three.js初体验
从github上下载three.js解压进入文件夹后,几个比较有用的文件夹有:
build:存放编译生成的Three.js库文件,压缩和未压缩的版本都有;
examples:存放各种实例,数量非常多,打开后直接能运行看到效果,是很棒的学习材料;
utils:存放各种工具,和blender结合的关键就在这里:utils\exporters\blender,这里我使用2.63\scripts\addons 下面的io_mesh_threejs文件夹,拷贝到我安装的blender目录:C:\Program Files (x86)\Blender Foundation\Blender\2.63\scripts\addons下面,然后在blender里面,点击主窗体显示模式选择图标,选择“User Preference”,在搜索框里输入“three”,找到我们刚刚拷贝过去的addon,勾选安装。这时候,当我们重新切换主窗体选择模式到“info”,在菜单项中选择“File/Export”时就出现了“Three.js(.js)”这一项了,就可以把我们创建的3D文件导出为Three.js支持的json格式的文件了。
按照Three.js官网项目首页的最少代码示例,一个Three.js的工程大致是这样的:
var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene = new THREE.Scene(); geometry = new THREE.CubeGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } function animate() { // note: three.js includes requestAnimationFrame shim requestAnimationFrame( animate ); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); }
Three.js绘制3D模型需要这些基本元素:
1,一个camera。 代码中是这样的:camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera存在透视投影和正视投影两种,透视投影比较符合我们日常习惯,也是常见的选择。创建完camera之后,一般需要设置camera的三维位置等等。
2,一个场景。scene = new THREE.Scene(); 场景是用来加载3D模型的三维空间。
3,光源。示例中没有设置。
4,3D的object。示例中是自己创建的:
geometry = new THREE.CubeGeometry( 200, 200, 200 ); //设置物理性状 material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );//设置材质 mesh = new THREE.Mesh( geometry, material );//创建模型 scene.add( mesh );//添加到场景中
5,渲染,即执行绘制。在示例中是由一个canvas的render执行的:
renderer = new THREE.CanvasRenderer();//用canvas来绘制3D模型 renderer.setSize( window.innerWidth, window.innerHeight );//设置绘制的区域大小 document.body.appendChild( renderer.domElement );//把绘制了3D模型的canvas添加为dom元素
另外, 为了更好地展示3D模型,代码中使用了animation,这也是Three.js的API,用户自定义每一帧时3D模型不同的状态,然后再render,就能够自动播放了。