阅读 202

Three.js开发指南-阅读记录(第八章)

创建和加载高级几何体和网格

几何体组合与合并

1. 对象组合

  • 定义:把多个几何体对象组合到一个组里面
  • 核心:定义组 new THREE.Group()

-使用方式:

let group = new THREE.Group();
group.add(cube1);
group.add(cube2);
scene.add(group);
复制代码
  • 组中心设置旋转点:
let arrow = new THREE.ArrowHelper(new THREE.Vector(0,1,0), group.position, 10, 0x0000ff);
scene.add(arrow);
复制代码

2. 网格组合

  • 作用:使用group可以操作大量的网格对象,但是当对象的数量非常多时,就会出现性能问题,这时引入THREE.Geometry.merge(),可以合并多个几何体为一个联合体,解决性能问题。
  • 使用demo:
let geometry = new THREE.Geometry();
for(let i=0; i<20000; i++){
    let cubeMesh = addMesh();
    cubeMesh.updataMatrix();
    geometry.merge(cubeMesh.geometry, cubeMesh, matrix);
}
scene.add(new THREE.Mesh(geometry,cubeMaterial));
复制代码

从外部资源加载几何体

  • three.js支持的文件格式

image.png

image.png

2.1 以JSON格式保存和加载

  • 保存和加载 THREE.Mesh() 的信息
//导出json并保存
let result = knot.toJSON();
localStorage.setItem("json",JSON.stringify(result));

//加载json数据
let json = localStorage.getItem("json");
if(!!json){
    let loadedGeometry = JSON.parse(json);
    let loader = new THREE.ObjectLoader(); //核心
    
    loadedMesh = loader.parse(loadedGeometry);
    loadedMesh.position.x -=50;
    scene.add(loadedMesh);
}
复制代码
  • 保存和加载场景
//SceneLoader.js SceneExporter.js 这些导出器和加载器需要从three的发布包中引入

//到处json并保存
let exporter = new THREE.SceneExporter();
let sceneJson = JSON.stringify(exporter.parse(scene));
localStorage.setItem("scene",sceneJson);


//加载json数据
let json = localStorage.getItem("scene");
let sceneLoader = new THREE.SceneLoader(); //核心
sceneLoader.parse(JSON.parse(json), function(e){}, '.'); //”.“为url相对地址
复制代码

2.2 导入三维格式文件

  • OBJ和MTL格式
//引入OBJLoader
<script type="text/javascript" src="OBJLoader.js"></script>

let loader = new THREE.OBJLoader();
loader.load('xxx.obj',function(loadedMesh){
    let material = new THREE.MeshLamberMaterial({
        color:0x5ccccc
    });
    
    loadedMesh.children.forEach((child)=>{
        child.material = material;
        child.geometry.computeFaceNormals();//保证正确渲染材质
        child.geometry.computeVertexNormals();//保证正确渲染材质
    });
    
    mesh = loadedMesh;
    loadedMesh.scale.set(100, 100, 100);
    loadedMesh.rotation.x = -0.3;
    scene.add(loadedMesh);
});
复制代码
  • 加载Collada模型
//引入文件
<script type="text/javascript" src="ColladaLoader.js"></scirpt>

let mesh;
let loader = new THREE.ColladaLoader();

loader.load('xxx.dae',function(result){
    mesh = result.scene.children[0].clone();
    mehs.scale.set(4, 4, 4);
    scene.add(mesh);
});
复制代码
文章分类
前端
文章标签