読者です 読者をやめる 読者になる 読者になる

Hope is a Dream. Dream is a Hope.

非公開ふぃふぃ工房ブログ

↓LINE登録はこちら↓

定期的につぶやいてます. 記事に興味を持って頂いたかたや、Line Botを使ってみたいかたは試しに登録どうぞ

友だち追加

Three.jsで入れ子のクラスをつくりたいかたへ

数値計算 Javascript

Three.jsで入れ子のクラスをつくりたいかたへ!断念!!

人も地球も結局は親との相対座標系で動く。 「それなら、一つのクラスで作れるじゃないかー!」

と、かってに(当たり前のこと)に気がつきテンション!!

で、コードを書き始めましたが。

初めて、プログラムが作れないということを経験。。

素人であることを痛感。(調子にのってたー)

行き着いたところは、THREE.jsのObject3Dというクラスにて、 実装しようとしていた機構(親子関係を表現するための機構)がすでにあった。。。

Object3Dクラスには、parent,chidrenというプロパティが合って、それに対するadd、removeがある。
(本当に参考になりました。ありがとうございます。)

実際には、以下のようにするだけーー

var geometry = new THREE.CubeGeometry( 4, 6, 4);
var material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
var body = new THREE.Mesh( geometry, material );
geometry = new THREE.CubeGeometry( 4, 1.2, 1.2);
material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
var lhand = new THREE.Mesh( geometry, material );
body.add(lhand);
scene.add(body);

addするんだよ。 sceneが地球なんだよ。

Object3D Class Refarence

/**
 * @author mrdoob / http://mrdoob.com/
 * @author mikael emtinger / http://gomo.se/
 * @author alteredq / http://alteredqualia.com/
 */

THREE.Object3D = function () {

    this.id = THREE.Object3DIdCount ++;

    this.name = '';
    this.properties = {};

    this.parent = undefined;
    this.children = [];

    this.position = new THREE.Vector3();

};


THREE.Object3D.prototype = {

    constructor: THREE.Object3D,

    add: function ( object ) {

        if ( object === this ) {

            console.warn( 'THREE.Object3D.add: An object can\'t be added as a child of itself.' );
            return;

        }

        if ( object instanceof THREE.Object3D ) {

            if ( object.parent !== undefined ) {

                object.parent.remove( object );

            }

            object.parent = this;
            this.children.push( object );

            // add to scene

            var scene = this;

            while ( scene.parent !== undefined ) {

                scene = scene.parent;

            }

            if ( scene !== undefined && scene instanceof THREE.Scene )  {

                scene.__addObject( object );

            }

        }

    },

};

THREE.Object3D.__m1 = new THREE.Matrix4();
THREE.Object3D.defaultEulerOrder = 'XYZ',

THREE.Object3DIdCount = 0;

明日は素直にThree.jsだけで作ろう。。

HTML5による物理シミュレーション―JavaScriptでThree.js/jqPlo