チクタクバンバンのようなゲームをつくるでつくったゲームをブラウザ上でも遊べるようにします。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ファイルでつくり、ここからテクスチャを生成して描画しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<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> |
次回からは線路プレートのうえを走らせてみることにします。
