時計を表示させる TypeScript/JavaScriptでもつくるチクタクバンバンのようなゲーム（1）

チクタクバンバンのようなゲームをつくるでつくったゲームをブラウザ上でも遊べるようにします。Three.jsをつかって疑似3D仕様にします。

今回はBlenderをつかってチクタクバンバンに出てきそうな時計をつくりました。参考にした動画はこれです。

動画を貼り付けたあとで気がついたのですが、この動画は他のサイトでは再生できない設定にしているようです。ただしクリックすれば視聴可能です。

この動画が作成されたときは「Blender歴38日目」とのことですが、私はBlenderははじめてなのでヘンテコな時計しかつくれませんでした。自分でつくった時計は下の動画にあるものです。いろいろ痛々しいですが、まあはじめてならこんなものでしょう。今度修正して完成度の高いものにしていきます。

完成したらエクスポートします。ファイル名はclock.daeにしました。これをThree.jsで使うためにはどうすればよいでしょうか？

まずThreeJSを書いてindex.htmlをダブルクリック・・・しても表示されません。Three.jsでは画像ファイルもそうですが、外部のファイルをつかうためにはサーバー上でないと動いてくれません。しかし毎回毎回アップロードするのは面倒です。そこでWeb アプリケーションの開発環境をローカルに簡単に構築できる XAMPPを使います。MySQLやPHPがうまく動くかどうかも検証できるので便利です。

以下はBlenderで作成してエクスポートしたdaeファイルを表示させるためのコードです。daeファイルの場合を読み込むにはColladaLoader.jsファイルが必要です。また文字盤の文字はテキストオブジェクトなのですが、うまく読み込めないので同じような物をpngファイルでつくり、ここからテクスチャを生成して描画しています。

動作確認はこちらから

<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="./ColladaLoader.js"></script>
<title>サンプル</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    let model = null;
    window.addEventListener('load', init);

    function init() {
        const width = 500;
        const height = 400;

        const renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('#canvas')
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);

        // カメラの初期座標を設定
        camera.position.set(0, 2.5, 5);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        // 平行光源を作成
        const directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(0, 1, 0);
        scene.add(directionalLight);
        // 環境光を追加
        const ambientLight = new THREE.AmbientLight(0x333333);
        scene.add(ambientLight);

        // 3DS形式のモデルデータを読み込む
        const loader = new THREE.ColladaLoader();
        loader.load('./clock.dae', collada => {

            // 読み込み後に3D空間に追加
            model = collada.scene;

            // 文字盤がうまく読み込めないのでpngファイルでテクスチャを生成して描画する
            for(let i=0; i<model.children.length; i++) {
                if(model.children[i].material != null) {
                    if(model.children[i].material.name == "material_clock_face") {
                        const loader = new THREE.TextureLoader();
                        let texture = loader.load('face.png');

                        // マテリアルを作成
                        const material = new THREE.MeshStandardMaterial({map: texture });
                        model.children[i].material = material;
                    }
                }
            }
            scene.add(model);
        });
        tick();

        let ang = 0;

        // 毎フレーム時に実行されるループイベントです
        function tick() {
            // レンダリング
            if(model != null) {
                ang += 0.01;
                model.rotation.z = ang;
            }

            renderer.render(scene, camera);
            requestAnimationFrame(tick);
        }
    }
</script>
</body>
</html>

<html>

<head>

</head>

<body>

let model = null;

window.addEventListener('load', init);

function init() {

const width = 500;

const height = 400;

const renderer = new THREE.WebGLRenderer({

canvas: document.querySelector('#canvas')

});

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(width, height);

renderer.gammaInput = true;

renderer.gammaOutput = true;

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);

// カメラの初期座標を設定

camera.position.set(0, 2.5, 5);

camera.lookAt(new THREE.Vector3(0, 0, 0));

// 平行光源を作成

const directionalLight = new THREE.DirectionalLight(0xffffff);

directionalLight.position.set(0, 1, 0);

scene.add(directionalLight);

// 環境光を追加

const ambientLight = new THREE.AmbientLight(0x333333);

scene.add(ambientLight);

// 3DS形式のモデルデータを読み込む

const loader = new THREE.ColladaLoader();

loader.load('./clock.dae', collada => {

// 読み込み後に3D空間に追加

model = collada.scene;

// 文字盤がうまく読み込めないのでpngファイルでテクスチャを生成して描画する

for(let i=0; i<model.children.length; i++) {

if(model.children[i].material != null) {

if(model.children[i].material.name == "material_clock_face") {

const loader = new THREE.TextureLoader();

let texture = loader.load('face.png');

// マテリアルを作成

const material = new THREE.MeshStandardMaterial({map: texture });

model.children[i].material = material;

}

scene.add(model);

});

tick();

let ang = 0;

// 毎フレーム時に実行されるループイベントです

function tick() {

// レンダリング

if(model != null) {

ang += 0.01;

model.rotation.z = ang;

}

renderer.render(scene, camera);

requestAnimationFrame(tick);

}

</script>

</body>

</html>

次回からは線路プレートのうえを走らせてみることにします。

時計を表示させる TypeScript/JavaScriptでもつくるチクタクバンバンのようなゲーム（1）

関連記事

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ