THREE.jsにて親子関係の扱い方

(作業メモばかりで申し訳ありません。。)

やっとわかってきました。

Three.js では、複数のオブジェクトを一つの Object3D に追加して一括管理します。 : GINPRO / SQLの窓と銀プログラマ

THREE.UserCubes1 = function ( scene, cubeSize, cubeNum, displaySpan ) {

    // キューブの基本サイズ( 見た目は後でスケールで変化する )
    this.cubeSize = ( cubeSize !== undefined ) ? cubeSize : 20;
    // キューブの数
    this.cubeNum = ( cubeNum !== undefined ) ? cubeNum : 100;
    // 表示幅( 発生させる座標の範囲の長さ )
    this.displaySpan = ( displaySpan !== undefined ) ? displaySpan : 800;

    this.geometry = new THREE.CubeGeometry( this.cubeSize, this.cubeSize, this.cubeSize );
    this.group = null
    this.scene = scene;

    this.renew();

};

THREE.UserCubes1.prototype = {
    constructor: THREE.UserCubes1,
    remove: function() {
        this.scene.remove( this.group )
        this.group = null;
    },
    renew: function() {
        if ( this.group == null ) {
            this.group = new THREE.Object3D();
            this.scene.add( this.group );
        }
        for ( var i = 0; i < this.cubeNum; i ++ ) {

            var object = new THREE.Mesh(
                this.geometry,
                new THREE.MeshBasicMaterial( {
                    color: Math.random() * 0xffffff,
                    transparent: true,
                    opacity: 0.5 }
                )
            );

            // 正座標に発生させて、原点に半分戻す
            object.position.x = Math.random() * this.displaySpan - this.displaySpan/2;
            object.position.y = Math.random() * this.displaySpan - this.displaySpan/2;
            object.position.z = Math.random() * this.displaySpan - this.displaySpan/2;

            object.scale.x = Math.random() * 2 + 1;
            object.scale.y = Math.random() * 2 + 1;
            object.scale.z = Math.random() * 2 + 1;

            // 向きを360度ランダム
            object.rotation.x = Math.random() * 2 * Math.PI;
            object.rotation.y = Math.random() * 2 * Math.PI;
            object.rotation.z = Math.random() * 2 * Math.PI;

            this.group.add( object )

        }
    
    }
}