【three.js】ライチュウを表示

・作ったページ
http://bilibili.html.xdomain.jp/index.html
しっぽが長い……

・フリーの3Dモデルが集まってるところ
3D Models for Free - Free3D.com

参考ページ：
・three.jsの基礎
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ | HTML5Experts.jp

・three.jsで3Dモデル(daeファイル)を表示
Three.jsでモデルデータを読み込む - ICS MEDIA

↓これだけやれば3Dモデルが表示できる

Daeファイルの読み込み

１．ColladaLoaderインスタンスを生成
２．load関数の呼び出し、コールバックの登録
　load( 'daeファイルのパス', ロード後に呼ばれるコールバック関数 )
３．読み込んだモデルをシーンに追加
４．座標を指定

        const loader = new THREE.ColladaLoader();        // 1
        
        loader.load('./model/RaichuM.dae',  (collada) => {    // 2
            const model = collada.scene;
            self.scene.add(model);        // 3
            model.position.set(0,0,0);   // 4
        });

【app.js】

var APP = (function() {
    var self = {};

    var APP = function(canvas) {
        self.scene = new THREE.Scene();
        self.camera = new THREE.PerspectiveCamera(100, canvas.width / canvas.height, 1, 1000);
        self.renderer = new THREE.WebGLRenderer({canvas:canvas});
        self.controls = new THREE.OrbitControls(self.camera);
        self.renderer.setClearColor(0xffffff);
        self.camera.position.set(0,3.0,3.0);
        
        self.initGrid();
        self.initLight();
        self.initLoader();
        self.animate();
    }
    
    self.initGrid = function() {
        const grid = new THREE.GridHelper(100, 50);
        grid.material.color = new THREE.Color(0xffff00);
        self.scene.add(grid);
        self.renderer.render(self.scene, self.camera);
    };
    
    self.initLight = function() {
        const directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(0,2.0,5.0);
        self.scene.add(directionalLight);
    };

    self.initLoader = function() {
        const loader = new THREE.ColladaLoader();
        
        loader.load('./model/RaichuM.dae',  (collada) => {
            const model = collada.scene;
            self.scene.add(model);
            model.position.set(0,0,0);
        });
        
        loader.load('./model/PikachuM.dae',  (collada) => {
            const model = collada.scene;
            self.scene.add(model);
            model.position.set(2,0,0);
            console.log(collada);
        });
    };
            
    self.animate = function() {
        self.controls.update();
        self.renderer.render(self.scene, self.camera);
        
        requestAnimationFrame(self.animate);
    };
    
    return APP;
})();