・Treas | HollowCradle
http://hollowcradle.cf/treas/index.html
Blenderでモデリングしたものをブラウザで見られるようにしてみました。
ちなみにスマホでご覧いただくとなんちゃってVRが楽しめます。
(※iOSで見られるかわかりません。Androidは確認済みです)
今回はこの
とはいっても中身はそんなにややこしいことではなくて。
やってることはこれらを足したものです。
・Babylon.jsで空を自由に飛びたいな
https://kairandou.blogspot.com/2018/08/babylonjs.html
・Memo:Blender To Babylon.js
https://kairandou.blogspot.com/2018/07/memoblender-to-babylonjs.html
大まかなステップはこんな感じ。
- Blenderでモデルを作る
- Babylon.js用にエクスポートする
- HTML,CSS,Javascriptを書く
- サーバーを借りてアップする
これだけでWeb上に展示室が作れます。
なんて簡単。素敵な世界。
興味がある方はぜひぜひお試しあれ。
以下BlenderやらBabylon.jsの資料。
・Exporters/Blender at master · BabylonJS/Exporters · GitHub
https://github.com/BabylonJS/Exporters/tree/master/Blender
・Blender | Babylon.js Documentation
http://doc.babylonjs.com/resources/blender
・Load from any file type - glTF, OBJ, STL, etc. | Babylon.js Documentation
https://doc.babylonjs.com/how_to/load_from_any_file_type
実際のコードはこんな感じ。
※抜粋
<! DOCUTYPE html> <html lang='ja'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' href='css/styles.css'> <title>Title</title> </head> <body> <main> <canvas id='canvas' oncontextmenu='return false;'>This Browser Not Support <code>canvas</code> Element.</canvas> </main> <script src='https://preview.babylonjs.com/babylon.js'></script> <script src='https://preview.babylonjs.com/loaders/babylonjs.loaders.js'></script> <script src='https://code.jquery.com/pep/0.4.1/pep.js'></script> <script src='script/index.js'></script> </body> </html>
html, body{
width:100%;
height:100%;
overflow:hidden;
}
#canvas{
touch-action:none;
}
if (BABYLON.Engine.isSupported()) {
const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function create_scene(engine) {
let scene = new BABYLON.Scene(engine);
let camera = new BABYLON.DeviceOrientationCamera('DOCamera', new BABYLON.Vector3(0, 2, 0), scene);
camera.attachControl(canvas, false);
BABYLON.SceneLoader.Append('./model/', 'treas.babylon', scene, function (scene) {
});
return scene;
}
function init() {
let engine = new BABYLON.Engine(canvas, true);
window.addEventListener('resize', function () {
engine.resize();
})
let scene = create_scene(engine);
engine.runRenderLoop(function () {
scene.render();
});
// scene.debugLayer.show();
}
init();
}
サーバーやドメインの契約、HTML,CSS,Javascriptの学習に関してはこちら参照。
・無料縛りのWebサイト制作
https://kairandou.blogspot.com/2018/06/web.html
必要知識はそこそこありますけど、全部入門程度なのでさらっとやれます。
やる気があるなら数日で可能かと。
ちなみにTreasで使ってるのはこちらのモデル。
・3Dモデル「撮影セット2」
https://hollowcradle.booth.pm/items/1050122
ファイル名をご覧頂ければわかりますが、同じ名前が付いてます。
「元々こうするつもりで作ったのじゃ」・・・どうでもいい小話は置いといて。
案外使い勝手は良いので、よければ使ってみてくださいな。
BlenderにインポートしてLampを追加するだけで使えるはず。
つっても、たぶんこれを見てる人はBlenderでモデリング出来る人な気がするから「もっと良いの自分で作れるから要らんわ」って言われると思うけれど、一応宣伝ってことで。
ではまた次回。
コメント
コメントを投稿