環境
windows11
blender 5.1.1
fire fox
1.アドオンの追加
blenderからX3D形式に変換してくれるありがたいアドオン
https://extensions.blender.org/add-ons/web3d-x3d-vrml2-format/?utm_source=blender-5.1.1
今回はこれを使う。
2.モデルのエクスポート
アドオンを追加すると、エクスポートの場所にx3dが追加される。
エクスポートできないもの
- ボーン
- アニメーション
他にもありそうだが、主要な部分ではおそらくこの二つ。
注意点
x3dにエクスポートされるとき、blender側の階層と全く同じように出力されるので、すべて結合させると一つのオブジェクトとして出力されてしまう。
その場合、アニメーションがオブジェクトごとにしかできないので、細かい動きができない。
もし、腕だけ動かしたいのであれば、blender側で分離してエクスポートしなければならない。
一応、頂点ごとにアニメーションできるので、不可能ではないが面倒くさい。
3.Hello World
他に記事が少ないので一応Hello World。
ボックスを一つ表示させるための最低限のコード。
<html>
<head>
<title>Hello World</title>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<h1>Hello, X3DOM!</h1>
<x3d width='80vw' height='400px'>
<scene>
<shape>
<box></box>
</shape>
</scene>
</x3d>
</body>
</html>
シーンに何もない最低限のコード
<html>
<head>
<title>hoge hoge</title>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<x3d width='80vw' height='400px'>
<scene>
</scene>
</x3d>
</body>
</html>
4.モデルを表示させる
まず、x3d形式にエクスポートしたファイルをテキストエディタで開く。
すると、11行目あたりからSceneタグがあるので、その中をすべてコピーする。
コピーしたものをHello Worldで使ったほうのSceneタグの中に入れるだけで、モデルが表示される。
そのままだとTRANSFORMのrotationの値が扱いにくいので、「1 0 0 1.57」などわかりやすい値にしておくことをお勧めする。
画像テクスチャを使っている場合
画像テクスチャは自動で生成されないので、自分で同じディレクトリに持ってくる必要がある。
さらに、普通にブラウザでファイルを開くだけでは表示されない。(真っ黒になる)
今から説明するやり方はfire fox限定なのでご注意を。
画像を使いたいのであれば、セキュリティを外す必要がある。
自己責任でお願いします。
まず、これを入力して高度な設定を開く。
about:config
検索欄にfileuriと入力すると、3つ出てくる。
一番下のsecurity.fileuri.strict_origin_policyをfalseにすると画像を表示させることができるようになる。
fileuri
これで画像は表示される。
しかし、このままだとUV展開された画像を上から置いただけのような表示になる。
この解決方法は先人が記事にしてくれているのでそちらを読もう。
https://qiita.com/tyumu/items/1fe0f5109e3ff3c63fba
これでblender側と同じ表示のモデルが出来上がる。
公式チュートリアル: https://doc.x3dom.org/tutorials/index.html
公式ドキュメント: https://doc.x3dom.org/index.html