Thressjs开发笔记之八创建、加载高级网格和几何体

组合对象

也就是把几个物体捆绑在一起，方便对整体做出统一的操作

sphere = createMesh(new THREE.SphereGeometry(5, 10, 10));
cube = createMesh(new THREE.BoxGeometry(6, 6, 6));

sphere.position.set(;
cube.position.set();

group = new THREE.Group();
group.add(sphere);
group.add(cube);

scene.add(group);

高性能捆绑组合体

意思就是：单独去旋转每个物体会很耗性能，如果把他组合在一起，一起操作就快很多。（将多个网络合并成一个网络）。
通过THREE.GeometryUtils.merge函数可以将多个几何体合并在起来，创建一个联合体。

var geometry = new THREE.Geometry();

geometry.merge(geometry, childCube);

scene.add(new THREE.Mesh(geometry, cubeMaterial));
//缺点对单个物体的控制不是太方便，对单个物体的材质可以用MeshFaceMaterial来解决。

外部加载几何体

常用的模型格式
Json（THREEjd自己的格式），OBJ/MTL（网络/材质）
其他格式
Collada，STL，CTM,VTK,PDB,PLY

JSON格式

内部物体的save&load 保存到了浏览器缓存里与读出

//save
var knot = createMesh(new THREE.TorusKnotGeometry(10, 1, 64, 8, 2, 3, 1));

var result = knot.toJSON();
localStorage.setItem("json", JSON.stringify(result));
//load
var json = localStorage.getItem("json");

if (json) {
       var loadedGeometry = JSON.parse(json);
       var loader = new THREE.ObjectLoader();

       loadedMesh = loader.parse(loadedGeometry);
       loadedMesh.position.x -= 50;
       scene.add(loadedMesh);
}

内部场景的exporter &load

//导出
var exporter = new THREE.SceneExporter();
var sceneJson = JSON.stringify(exporter.parse(scene));
localStorage.setItem('scene', sceneJson);

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

外部JSON导入（Blender）

1.给Blender安装Threejs的导出器
把THREEjs的\three.js-master\utils\exporters\blender\addons复制到Blender的Blender\2.78\scripts\addons里
2.激活导出器
File-》UserPreference-》addone-》搜索three-》打钩-》左下角save setting

导入代码

 var loader = new THREE.JSONLoader();
loader.load('../assets/models/misc_chair01.js', function (geometry, mat) {
            mesh = new THREE.Mesh(geometry, mat[0]);

            mesh.scale.x = 15;
            mesh.scale.y = 15;
            mesh.scale.z = 15;

            scene.add(mesh);

}, '../assets/models/');

加载OBJ/MIT文件

//obj需要obj加载器
 var mesh;
var loader = new THREE.OBJLoader();//初始化加载器
loader.load('../assets/models/pinecone.obj', function (loadedMesh) {
var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});


    loadedMesh.children.forEach(function (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);
});

//obj并mtl直接赋予材质.
 var mesh;

var loader = new THREE.OBJMTLLoader();

loader.load('../assets/models/butterfly.obj', '../assets/models/butterfly.mtl', function (object) {

            // configure the wings
            var wing2 = object.children[5].children[0];
            var wing1 = object.children[4].children[0];

            wing1.material.opacity = 0.6;
            wing1.material.transparent = true;
            wing1.material.depthTest = false;
            wing1.material.side = THREE.DoubleSide;

            wing2.material.opacity = 0.6;
            wing2.material.depthTest = false;
            wing2.material.transparent = true;
            wing2.material.side = THREE.DoubleSide;

            object.scale.set(140, 140, 140);
            mesh = object;
            scene.add(mesh);

            object.rotation.x = 0.2;
            object.rotation.y = -1.3;
});