使用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,就能够自动播放了。