<!--親の顔より見た光景-->

日々の発見を残していきます。

【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ファイルの読み込み

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

        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;
})();

【Three.js】格子を作る

Three.jsを使って、格子を表示するだけのページを作った。
three.js Test

OrbitControls.jsというライブラリのおかげで3Dプログラミングなのにめちゃくちゃ楽。
レンタルサーバーにファイル上げるのくっそ面倒。
サーバー作ってエッチページ作りてえなぁ

詳細の記述は後日気が向いたら。
WebGLRendererの引数にcanvasをそのまま渡していて、「絵が出ねえなぁ」って1時間くらい悩んでいた。

【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.camera.position.set(1.0,1.0,0.0);

        self.initGrid();
        self.animate();
    }
    
    self.initGrid = function() {
        var grid = new THREE.GridHelper(100, 50);
        self.scene.add(grid);
        self.renderer.render(self.scene, self.camera);
    };

    self.animate = function() {
        self.controls.update();
        self.renderer.render(self.scene, self.camera);
        
        requestAnimationFrame(self.animate);
    };
    return APP;
})();

【index.html】

<!DOCTYPE HTML>
<html>
    <head>
        <title>three.js Test</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script type="text/javascript" src="three.js-master/build/three.min.js"></script>
        <script type="text/javascript" src="three.js-master/examples/js/controls/OrbitControls.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script>
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var app = new APP(canvas);
        </script>
    </body>
</html>

【JavaScript】モジュールパターン

自分用メモ。モジュールパターンと言いつつ、1つしか知らない。

参考:
【javascript】やさしいクラスの作り方

【index.html】

<!DOCTYPE html>
<html>
    <head>
        <title>Module Test</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="text/javascript" src="baseModulePattern.js"></script>
        <script type="text/javascript">
            var image = new Image('testImage');
            console.log(image.getImage());
            image.setImage('newImage');
            console.log(image.getImage());
            
            console.log(image.self.image_);     // this cause error becase accessing pribate member image_.
        </script>
    </body>
</html>

【Moduleのほう】

var Image = (function(){
    var self = this;
    
    // constructor
    var Image = function(image) {
        self.image_ = image;
    };
    
    var p = Image.prototype;
    
    // public
    p.getImage = function() {
       return self.image_; 
    };
    
    // public
    p.setImage = function(image) {
        self.image_ = image;
    };
    
    // private
    var setImageInfo = function(info) {
        sefl.info = info;
    };
    
    return Image;       // important for "new". must return Constructor.
})();

ポイントは、return Image;
ここでconstructor Image functionオブジェクトを返している。
モジュールを使う人はvar image = new Image(image);とし、imageにImage functionが入る。

Image functionだけ入れても何も出来ないので、セッター、ゲッターなどのpublic関数を用意する。
それらをprototypeで辿れるように、Image funcitonのprototypeにセッターゲッターを登録している。

という認識だが、間違っているかも。

【JavaScript】多次元配列の定義

・要素数を自由に追加していく方法

var array = new Array();
array[0] = new Array();
array[1] = new Array();
array[2] = new Array();
...

・長さを決めて1次元目 or 2次元目の配列を定義

var array = new Array();
array[0] = new Array( X_LENGTH );
array[1] = new Array( X_LENGTH );
array[2] = new Array( X_LENGTH );
...

var array = new Array();
for ( var i = 0; i < Y_LENGTH; i++ ) {
    array[i] = new Array();
}

・1次元目と2次元目の長さを決めて配列を定義

var array = new Array();
for ( var i = 0; i < Y_LENGTH; i++ ) {
    array[i] = new Array( X_LENGTH );
}

例:5 * 4 の配列を作りたい時は

var array = new Array();
for ( var i = 0; i < 5; i++ ) {
    array[i] = new Array( 4 );
}

で定義できる。

【gvim】vimrcの設定

gvimの設定ファイル _vimrc は Program Files( x86 )に存在する。

読み取り専用ファイルになっているので編集できない

 →_vimrc を Program Files( x86 )からデスクトップなどに移動して編集し、再度Program Files( x86 )へ上書きする必要がある


追記: そんなことは無かった

【JavaScript】手軽なタイマー関数

空ループでタイマー関数を作ることが可能。

【timer.html】

<!DOCTYPE=html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>Timer</title>
		<script type="text/javascript" src="timer.js"></script>
	</head>
	<body>
	</body>
</html>

【timer.js】

var wait = function( ms ) {
        var start_time = new Date();
	while ( ( new Date() - start_time ) < ms );
};

var main = function() {
	for ( var i = 0; i < 10; i++ ) {
		console.log( i + 1 );
		wait( 1000 );
	}
};
main();

開始時刻を変数に格納し、現在時刻との差分を確認する原始的な方法