Skip to main content

加载外部3D模型

Demo查看

teapot

外部模型

在Three.js中,创建常见几何体比较方便,但是对于复杂模型,比如人、各种动物、植物甚至现实中复杂物体。就比较麻烦,这些复杂建模通常由3D Max等工具制作好三维模型。

支持的格式类型

*.obj 是最常用的模型格式, 导入带 *.mtl 材质的*.obj 文件需要 MTLLoader.js 以及 OBJMTLLoader.js。 另有 PLYLoader.jsSTLLoader.js 等分别对应不同格式的加载器,可以根据模型格式自行选择。

目前,支持的模型格式有:

  • *.obj -- 需要 OBJLoader.js
  • *.obj, *.mtl -- 需要 MTLLoader.js 以及 OBJMTLLoader.js
  • *.dae
  • *.ctm
  • *.ply -- 需要 PLYLoader.js
  • *.stl -- 需要 STLLoader.js
  • *.wrl
  • *.vtk - 需要 VTKLoader.js

模型导入方法

创建 loader 变量,用于导入模型

var objloader = new THREE.ObjectLoader(); // 导入json格式
var OBJloader = new THREE.OBJLoader(); // 可导入 .obj格式

…… 其他格式类似

loader 导入模型的时候,接受两个参数:

  • 第一个表示模型路径
  • 第二个表示完成导入后的回调函数 - 一般我们需要在这个回调函数中将导入的模型添加到场景中。

无材质的模型

json 格式文件加载

teapot

var objloader = new THREE.ObjectLoader();
objloader.load( "./demo/models/teapot.json", function( group ) {
mesh = group.children[0];
mesh.material = material;
mesh.scale.set(4,4,4);
mesh.position.y = -30;
scene.add( mesh );
});

.obj 格式文件加载

teapot

var loader = new THREE.OBJLoader();
loader.load('./demo/models/teapot.obj', function(obj) {
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshLambertMaterial({
color: 0xffff00,
side: THREE.DoubleSide
});
}
});
mesh = obj;
mesh.position.y = -30;
mesh.scale.set(30,30,30);
scene.add(obj);
});

有材质的模型

.mtl 为材质文件

teapot

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('./demo/models/teapot.mtl', function(materials) {
materials.preload();
// model loader
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('./demo/models/teapot.obj', function (obj) {
if (obj.children.length > 0) {
mesh = obj;
mesh.position.y = -30;
mesh.scale.set(30,30,30);
scene.add(obj);
}
});
});

B站视频讲解


本文部分内容参照及引用:

Three.js入门指南