08.ThreeJs开发指南-第八章-加载外部模型

第八章创建、加载高级网格和几何体

对象的组合

当从一个几何体中创建网格，并使用多种材质时，Three.js就会创建一个组。

该几何体的多个副本就会添加到这个组里，每份副本都有自己特定的材质。

我们看到的结果是，一个网格拥有多个材质，实际上它是一个包含多个网格的组。

sphere = createMesh(new THREE.SphereGeometry(5,10,10));
cube = createMesh(new THREE.CubeGeometry(6,6,6));group = new THREE.Object3D();
group.add(sphere);
group.add(cube);scene.add(group);

如果旋转一个组，不是旋转组中的每个对象，而是旋转整个组。

为了方便观察，在组的中心放置一个箭头。

var arrow = new THREE.ArrowHelper (new THREE.Vector3(0,1,0),group.position,10,0x0000ff);scene.add(arrow);

使用组的时候，依然可以引用和修改组中的一个单独的几何体。

将多个网格合并成一个网格

当渲染的对象比较多时，即使在组中，每个对象还是独立的，需要对它们分别进行处理和渲染。

通过THREE.GeometryUtils.merge函数可以将多个几何体合并起来，创建一个联合体。

var geometry = new THREE.Geometry();
for(var i = 0 ;i<controls.numberOfObject;i++){//addCube()返回一个THREE.CubeGeometry对象THREE.GeometryUtils.merge(geometry,addCube());//最大的缺点：不能对单独的对象进行控制。
}scene.add(new THREE.Mesh(geometry,cubeMaterial));

从外部资源加载几何体

JSON：Three.js有它自己的json格式，你可以使用它以声明的方式定义几何体和场景。但是它不是一种正式的格式。
OBJ和MTL：OBJ是一种简单的三维文件格式，用来定义对象的几何体。MTL文件通常和OBJ文件一起使用，在一个MTL文件中，定义对象的材质。
Collada：用来定义XML类文件中数字内容的格式。差不多所有的三维软件和渲染引擎都支持这个格式。
STL：立体成型术。广泛用于快速成型。例如，三维打印机的模型文件通常是STL文件。Three.js有一个可定制的STL导出工具，STLExporter.js。可以将Three.js中的模型导出到一个STL文件。
CTM：由openCTM创建的格式。可以用来压缩存储表示三维网格的三角形面片。
VTK：Visualization Tookit 定义的文件格式，用来指定顶点和面。VTK有两种格式，Three.js支持旧的格式，即Asscii格式。
PDB：特别的数据格式，由蛋白质数据银行场景，用来定义蛋白质的形状。Three.js可以加载并显示这种描述格式的蛋白质。
PLY：多边形文件格式。通常保存三维扫描仪的数据。

Three.js的json格式

1.保存和加载几何体

HTML5本地存储API，通过这个API可以很容易将持久化信息保存在客户端的浏览器中，以后还可以读取，即使浏览器关闭，重启之后也可以。

示例：

1.引入GeometryExporter.js。

2.保存几何体到浏览器本地存储中。

var exporter = new THREE.GeometryExporter();
var result = exporter.parse(knot.geometry);
localStorage.setItem("json",JSON.stringfy(result));

//将一个json对象转换为一个字符串
JSON.stringfy(result);json对象的格式如下：
{'metadata':{'version':4,'type':'geometry','generator':GeometryExporter''},'vertices':[14.00044545,-0.0065944,...],'nvs':[[]],'faces':[49,0,8,...]}

Three.js保存的是原始的几何体。它将所有顶点和面的信息保存起来，但是你并不知道这到底是一个怎样的几何体。

加载保存的几何体到场景中。

var json =  localStorage.getItem('json');if(json){var localGeometry = JSON.parse(json);var loader = new THREE.JSONLoader();var geom = loader.parse(localGeometry);loadedMesh = createMesh(geom.geometry);loadedMesh.position.x = -35;loadedMesh.position.z = -5;scene.add(loadedMesh);
}

JSONLoader还提供了一个load函数，可以传递一个url地址，改地址指向一个含有json定义的文件。

这里，我们只保存了几何体，其他的信息都丢失了，比如材质、光源、位置等。我们可以使用SceneExporter保存这些信息。

保存和加载场景

1.引入SceneExporter.js

2.导出场景

var exporter = new THREE.SceneExporter();
var sceneJson = JSON.stringfy(exporter.parse(scene));
localStorage.setItem('scene',sceneJson);

3.加载场景

var json = localStorage.getItem('scene');
var sceneLoader = new THREE.SceneLoader();
sceneLoader.parse(JSON.parse(json),function(e){scene = e.scene;
},'.');

传递给loader的最后一个参数”.”是一个URL相对地址。例如，在材质中使用的纹理，就可以从这个相对地址中获取。本例中，我们没有使用纹理，所以传递但其概念目录即可。

同GeometryLoader一样，你也可以使用load函数直接加载一个JSON文件。

使用Blender

在blender中安装Three.js导出器：

G:\Study\WebGL\three.js-r73\utils\exporters\blender\addons中的io_three目录拷贝到Blender安装目录下的addons目录下。

激活导出器：

打开Blender->File->User Preferences->Addons->搜索three->勾选复选框

在Blender里加载和导出模型

File->Open->assets/models/misc_chair01.blend

File->Export->Three.js

导出的json文件中引用了纹理图片，所以我们要确保Three.js能够找到这个纹理文件。

在Blend中打开UV/Image Editor视图。File->…

Image->Save as Image 保存到和json模型相同的文件夹下。

在Three.js中加载模型：

var loader = new THREE.JsonLoader();
loader.load('../assets/models/misc_chair01.js',function(geometry,material){mesh = new THREE.Mesh(geometry,material[0]);mesh.scale.x = 15;mesh.scale.y = 15;mesh.scale.z = 15;scene.add(mesh);
},'../assets/models');

Three.js导入三维文件格式

1.OBJ和MTL格式

两种格式相互配合。OBJ定义几何体格式，而MTL定义所用的材质。两者都是文本格式。

在Three.js中如果只加载几何体，则只需引入OBJLoader.js

var loader = new THREE.OBJLoader();
loader.load('../assets/models/pinecone.obj',function(geometry){var material = new THREE.MeshLambertMaterial({color:0x5C3A21});geometry.children.forEach(function(child){if(child.children.length==1){if(child.children[0] instanceof THREE.Mesh){child.children[0].material = material;}}});geometry.scale.set(100,100,100);geometry.rotation.x = -0.3;scene.add(geometry);
});

如果加载几何体并直接赋予材质，需要引入：
OBJLoader.js
MTLLoader.js
OBJMTLLoader.js

var loader = new THREE.OBJMTLLoader();
loader.load('load',function(event){var object = event.content;var wing2 = object.children[5].children[0];var wing1 = object.children[4].children[0];wing1.material.alphaTest = 0.5;wing1.material.opacity = 0.6;wing1.material.transparent = true;wing2.material.alphaTest = 0.5;wing2.material.opacity = 0.6;wing2.material.transparent = true;object.scale.set(140,140,140);object.rotation.x = 0.2;object.rotation.y = -1.3;scene.add(object);});loader.load('../assets/models/butterfly.obj','../assets/models/butterfly.mtl');

有时间加载的模型源文件中材质的设置可能有问题，为此我们不得不去检查模型材质的定义，并修改一些属性。

2.加载Collada模型

扩展名.dae ，是另一种通用的、定义场景和模型（以及动画）的文件格式。

Collada不仅可以定义几何体，也定义了材质，甚至还可以定义光源。

引入js库：ColladaLoader.js

var mesh ;
loader.load('../assets/models/dae/Trunck_dae.dae',function(result){mesh = result.scene.children[0].children[0].clone();mesh.scale.set(4,4,4);scene.add(mesh);});

result对象的结构如下：

var result = {scene:scene,morphs:morphs,skins:skins,animations:animData,dar:{...}
};

第一次加载该模型的时候，材质不能正确的渲染。因为材质的纹理使用TGA格式，而Three.js不支持该格式。

所以我们将TGA格式转换为PNG格式，再修改.dar模型文件中的xml元素，使其指向转换后的PNG文件。

3.加载STL、CTM和VTK模型

<1>引入[NameOfFormat]Loader.js文件
<2>使用[NameOfFormat]Loader.load()函数从URL中加载。
<3>检查回调函数的返回结果，并对它进行渲染。

4.展示蛋白质数据银行中的蛋白质

蛋白质数据银行收集了很多分子、蛋白质的详细信息。还可以以PDB格式下载这些分子的数据结构。

Three.js中解析PDB文件：

引入：PDBLoader.js

var loader = new THREE.PDBLoader();
var group = new THREE.Obeject3D();loader.load('../assets/models/diamond.pdb',function(geometry,geometryBonds){var i = 0;//每个顶点代表顶点的位置geometry.vertices.forEach(function(position){var sphere = new THREE.SphereGeometry(0.2);var material = new THREE.MeshPhongMaterial({color:geometry.colors[i++];});var mesh = new THREE.Mesh(sphere,material);mesh.position = position;group.add(mesh);});//定义原子之间的键for(var j = 0 ;j<geometryBonds.vertices.length;j+=2){//创建一条三维路径，作为原子键var path = new THREE.SplineCurve3([geometryBonds.vertices[j],geometryBonds.vertices[j+1]]);var tube = new THREE.TubeGeometry(path,1,0.04);var material = new THREE.MeshPhongMaterial({color:0xcccccc});var mesh = new THREE.Mesh(tube,material);group.add(mesh);}console.log(geometry);console.log(geometryBonds);scene.add(group);
});

从PLY模型中创建粒子系统

引入：PLYLoader.js

var loader = new THREE.PLYLoader();
var group = new THREE.Object3D();loader.load('../assets/models/test.ply',function(geometry){var material = new THREE.ParticleBasicMaterial({color:0xffffff,size:0.4,opacity:0.6,transparent:true,blending:THREE.AdditiveBlending,map:generateSprite()});group = new THREE.ParticleSystem(geometry,material);group.sortParticles = true;console.log(group);scene.add(group);});

08.ThreeJs开发指南-第八章-加载外部模型相关推荐

Three.js加载外部模型骨骼动画
加载外部模型骨骼动画上节课是通过Threejs程序创建一个骨骼动画然后解析播放,本节课是加载解析一个外部的骨骼动画模型文件. 查看骨骼动画数据在解析模型骨骼动画之前,先加载外部的三维模型,查看骨骼 ...
three相机在模型上_Three.js加载外部模型的教程详细解说
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 ...
【Threejs 微信小程序】小程序加载外部模型后对模型进行平移旋转操作
一.效果展示需要实现的功能,对已经加载进小程序里的模型进行沿着xyz轴方向去旋转和平移. 如下图的效果: 点击底部的按钮,对模型进行平移和旋转操作. 二.方法描述关于平移和旋转的方法比如沿着 Y ...
three相机在模型上_实例讲解Three.js加载外部模型
本文主要介绍了Three.js外部模型加载的教程详解,在文章给大家补充介绍了three.js 外部模型加载json的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 1. 首 ...
Three.js 开发之加载外部GLTF模型和压缩（一）
Three.js 开发3D智慧楼宇(Vue) 在VUE项目里使用three.js搭建智慧园区和楼宇,控制空调.灯光.窗帘的开关等设备,实现智能化楼宇. 环境搭建除了vue项目所需要的基本依赖,可用v ...
threejs加载obj模型_Vulkan编程指南(章节31-载入模型)
章节31 载入模型介绍本章节我们将会渲染一个带有纹理的三维模型. 库我们使用tinyobjloader库来从OBJ文件加载顶点数据.tinyobjloader库是一个简单易用的单文件OBJ加载器 ...
iOS开发UI篇—懒加载
iOS开发UI篇-懒加载 1.懒加载基本懒加载--也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...
Knockout应用开发指南第八章：简单应用举例（1）
Knockout应用开发指南第八章:简单应用举例(1) 原文:Knockout应用开发指南第八章:简单应用举例(1) 本章展示的4个例子主要是利用了Knockout的基本语法特性,让大家感受到使用 ...
@value 静态变量_Spring注解驱动开发之八——@Value属性赋值、@PropertySource 加载外部配置文件...
本文包含以下内容: 建立新的配置类建立新的测试方法通过@Value 进行赋值通过@PropertySource 加载配置文件,并进行注入拓展@Value .@PropertySource ...
threejs加载3D模型例子
加载3D模型首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...

08.ThreeJs开发指南-第八章-加载外部模型

08.ThreeJs开发指南-第八章-加载外部模型相关推荐

最新文章

热门文章