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支持的文件格式

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);
});