使用Three.js + Blender构建在浏览器端显示的3D模型（1）

时间：2024-03-03 07:23:43

前言

前端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，就能够自动播放了。　　

相关文章