Create and load advanced geometry and grids

Geometry combination and merge

1. Object combination

  • Definition: To group multiple geometry objects into a group
  • New three.group ()

– Mode of use:

let group = new THREE.Group();
group.add(cube1);
group.add(cube2);
scene.add(group);
Copy the code
  • Set rotation point in group center:
let arrow = new THREE.ArrowHelper(new THREE.Vector(0.1.0), group.position, 10.0x0000ff);
scene.add(arrow);
Copy the code

2. Grid combination

  • Functions: A large number of grid objects can be operated by using group, but performance problems will occur when the number of objects is very large. In this case, THREE.Geometry. Merge () is introduced to merge multiple geometries into a union to solve performance problems.
  • Use the 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));
Copy the code

Loads geometry from an external resource

  • File format supported by three.js

2.1 Save and load in JSON format

  • Save and load information for three.mesh ()
// Export json and save it
let result = knot.toJSON();
localStorage.setItem("json".JSON.stringify(result));

// Load json data
let json = localStorage.getItem("json");
if(!!!!! json){let loadedGeometry = JSON.parse(json);
    let loader = new THREE.ObjectLoader(); / / core
    
    loadedMesh = loader.parse(loadedGeometry);
    loadedMesh.position.x -=50;
    scene.add(loadedMesh);
}
Copy the code
  • Save and load the scene
// sceneloader.js sceneext.js These exporters and loaders need to be imported from three's distribution package

// place json around and save
let exporter = new THREE.SceneExporter();
let sceneJson = JSON.stringify(exporter.parse(scene));
localStorage.setItem("scene",sceneJson);


// Load json data
let json = localStorage.getItem("scene");
let sceneLoader = new THREE.SceneLoader(); / / core
sceneLoader.parse(JSON.parse(json), function(e){}, '. '); "Is the relative url address
Copy the code

2.2 Importing three-dimensional files

  • OBJ and MTL formats
/ / introduce 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();// Make sure the material is rendered correctly
        child.geometry.computeVertexNormals();// Make sure the material is rendered correctly
    });
    
    mesh = loadedMesh;
    loadedMesh.scale.set(100.100.100);
    loadedMesh.rotation.x = -0.3;
    scene.add(loadedMesh);
});
Copy the code
  • Load the Collada model
// Import files
<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);
});
Copy the code