【Three.js】八、three.js几何体的组合与合并

一、几何体的组合

THREE.Group()可用来创建一个组，每一组中可包含多个对象，可对这些对象进行整体的调整，也可以单独调整组中的某个对象。使用add方法即可向组中添加对象。

示例：

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {initTrackballControls, initThree, initStats} from "../../util/util";

function init(){
    let stats = initStats();
    let {camera, scene, renderer} = initThree();

    let spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(0, 30, 50);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize.set(2048, 2048);
    scene.add(spotLight);

    let axes = new THREE.AxesHelper(20);
    scene.add(axes);

    let planeGeometry = new THREE.PlaneBufferGeometry(60, 40, 1,1);
    let planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    let plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5*Math.PI;
    plane.receiveShadow = true;
    scene.add(plane);

    let cubeGeometry = new THREE.BoxBufferGeometry(5,5,5,5,5,5);
    let cubeMaterial = new THREE.MeshStandardMaterial({
        color: 0x00ffff
    });
    let cube1 = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube1.position.set(-6, 5, 0);
    let cube2 = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube2.position.set(6, 5, 5);

    let group = new THREE.Group();
    group.add(cube1, cube2);
    scene.add(group);

    let gui = new dat.GUI();
    let cube1GUI = gui.addFolder('cube1');
    let cube2GUI = gui.addFolder('cube2');
    let groupGUI = gui.addFolder('group');
    let cube1Controls = {
        positionX: cube1.position.x,
        positionY: cube1.position.y,
        positionZ: cube1.position.z,
        scale: 1
    };
    let cube2Controls = {
        positionX: cube2.position.x,
        positionY: cube2.position.y,
        positionZ: cube2.position.z,
        scale: 1
    };
    let groupControls = {
        positionX: group.position.x,
        positionY: group.position.y,
        positionZ: group.position.z,
        scale: 1
    };
    cube1GUI.add(cube1Controls, 'positionX', -10, -6);
    cube1GUI.add(cube1Controls, 'positionY', 5, 10);
    cube1GUI.add(cube1Controls, 'positionZ', 0, 10);
    cube1GUI.add(cube1Controls, 'scale', 0, 3);
    cube2GUI.add(cube2Controls, 'positionX', 6, 10);
    cube2GUI.add(cube2Controls, 'positionY', 5, 10);
    cube2GUI.add(cube2Controls, 'positionZ', 5, 10);
    cube2GUI.add(cube2Controls, 'scale', 0, 3);
    groupGUI.add(groupControls, 'positionX', -10, 10);
    groupGUI.add(groupControls, 'positionY', 0, 10);
    groupGUI.add(groupControls, 'positionZ', -10, 10);
    groupGUI.add(groupControls, 'scale', 0, 3);
    let trackballControls = initTrackballControls(camera, renderer);
    function render(){
        stats.update();
        trackballControls.update();
        cube1.position.set(cube1Controls.positionX, cube1Controls.positionY, cube1Controls.positionZ);
        cube1.scale.set(cube1Controls.scale, cube1Controls.scale, cube1Controls.scale);
        cube2.position.set(cube2Controls.positionX, cube2Controls.positionY, cube2Controls.positionZ);
        cube2.scale.set(cube2Controls.scale, cube2Controls.scale, cube2Controls.scale);
        group.position.set(groupControls.positionX, groupControls.positionY, groupControls.positionZ);
        group.scale.set(groupControls.scale, groupControls.scale, groupControls.scale);
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
}
init();

  上例创建了两个立方体，并加入了一个Group中，使用右侧控制器可对这两个立方体进行位置及缩放的变化；其中group选项下可对整体进行调整，cube1/cube2分别对应一个立方体。

二、几何体的合并

通过THREE.Geometry.merge()方法可实现几何体之间的合并，一旦合并无法单独控制被合并的几何体。当页面存在大量几何体，使用合并可提高页面性能。

  如下，场景中显示500个立方体，观察fps好想还可以，通过右侧控制器将cubeNumber调至10000个点击redraw，你会发现fps迅速降低至低于30fps，如果勾选merge，你会发现fps就正常了。

import '../../stylus/index.styl'
import * as THREE from 'three';
import * as dat from 'dat.gui';
import {initTrackballControls, initStats, initThree} from "../../util/util";

function init () {
    let stats = initStats();
    let {scene, camera, renderer} = initThree();
    camera.position.set(-100, 100, 80);
    let cubeMaterial = new THREE.MeshNormalMaterial({
        transparent: true,
        opacity: 0.8
    });
    let addCube = () => {
        let cubeGeometry =  new THREE.BoxGeometry(4,4,4,4);
        let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = - 100 + Math.round(Math.random() * 200);
        cube.position.y =  Math.round(Math.random() * 10);
        cube.position.z = - 100 + Math.round(Math.random() * 200);
        return cube;
    };

    for (let i = 0; i < 500; i++) {
        scene.add(addCube());
    }

    let gui = new dat.GUI();
    let guiControls = {
        cubeNumber: 500,
        merge: false,
        redraw: function () {
            let removeArr = [];
            scene.children.forEach(item => {
                item instanceof THREE.Mesh && removeArr.push(item);
            });
            removeArr.forEach(item => scene.remove(item));
            if ( this.merge ) {
                let geometry = new THREE.Geometry();
                for (let i = 0; i < this.cubeNumber; i++) {
                    let cubeMesh = addCube();
                    cubeMesh.updateMatrix();
                    geometry.merge(cubeMesh.geometry, cubeMesh.matrix);
                }
                scene.add(new THREE.Mesh(geometry, cubeMaterial));
            } else {
                for (let i = 0; i < this.cubeNumber; i++) {
                    scene.add(addCube());
                }
            }
            addCube();
        }
    };
    gui.add(guiControls, 'cubeNumber');
    gui.add(guiControls, 'merge');
    gui.add(guiControls, 'redraw');
    let trackballControls = initTrackballControls(camera, renderer);
    function render() {
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
}

init();