3Dモデルを表示する
"a-obj-model"タグや、"a-gltf-model"タグを使う事で、簡単に3Dモデルを表示することができます。
obj形式のデータを扱う場合
先ずはモデリングデータの読み込みです。
"a-asset-item"タグで、obj形式のファイルとmtl形式のファイルを2つを読み込んでおきます。
"id"には、それぞれに名前をつけておきましょう。("a-assets"タグの中に記述する事を忘れずに!!)
index.html
<a-assets timeout="10000">
<a-asset-item id="car_obj" src="objファイルへのパス"></a-asset-item>
<a-asset-item id="car_mtl" src="mtlファイルへのパス"></a-asset-item>
</a-assets>
次に、"a-obj-model"タグを使ってモデリングデータを配置します。
"src"と、"mtl"には、先ほど指定した"id"を指定します。(car_objとcar_mtlですね)
index.html
<a-obj-model src="#car_obj" mtl="#car_mtl" position="0 0 -6" rotation="0 -20 0"></a-obj-model>
gltf形式のデータを扱う場合
こちらも、先ほどと似た手順です。
"a-asset-item"タグで、gltf形式のファイルへのパスを指定します。("a-assets"タグの中に記述する事を忘れずに!!)
index.html
<a-assets timeout="10000">
<a-asset-item id="submarine_gltf" src="gltfファイルへのパス"></a-asset-item>
</a-assets>
次に、"a-gltf-model"タグを使ってモデリングデータを配置します。
"src"に、先ほど指定した"id"を指定します。(submarine_gltfですね)
index.html
<a-gltf-model src="#submarine_gltf" position="-5 5 -15" rotation="0 -20 0"></a-gltf-model>
全体のコード
最後に全体のコードを載せておきますね。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="shortcut icon" href="./vr/images/icons/favicon.ico">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/three@0.131.3/examples/js/loaders/TDSLoader.js"></script>
<script src="./main.js"></script>
</head>
<body>
<a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray">
<!-- Sky, Emvironment -->
<a-sky color="#ECECEC"></a-sky>
<a-entity environment="preset: default; dressingAmount: 30"></a-entity>
<!-- Assets -->
<a-assets timeout="30000">
<a-asset-item id="car_obj" src="./assets/car/car.obj"></a-asset-item>
<a-asset-item id="car_mtl" src="./assets/car.mtl"></a-asset-item>
<a-asset-item id="submarine_gltf" src="./assets/submarine/scene.gltf"></a-asset-item>
</a-assets>
<!-- GLTF, Obj -->
<a-obj-model src="#car_obj" mtl="#car_mtl" position="0 0 -6" rotation="0 -50 0"></a-obj-model>
<a-gltf-model src="#submarine_gltf" position="-5 5 -15" rotation="0 -20 0"></a-gltf-model>
</a-scene>
</body>
</html>
次回はシーンに配置される光についてのお話です。