2020/05/13 15:52
BlenderでglTFファイルとしてエクスポートしてWebGL（ThreeJS）を使ってサイト上に表示させる方法
いろんな記事を参考にしてやっとWEB上での表示ができましたので備忘録として掲載しておきます。
Blenderで作成した3Dモデルを「glTF」ファイルでエクスポートし、そのままアニメーションを付けた状態でサイトで使う場合のコーディングです。
ThreeJSを使います。
用意するもの
・glTFファイル
・ThreeJSファイル
・コーディング
【glTFファイル】
まず「glTF」ファイルですが、これはBlender2.8のバージョンであればデフォでエクスポートできる仕様となってます。
例えば、Blenderでこんなテキストからの3Dモデルを適当に例で作りましたが
これをエクスポートで「gltf」の拡張子で保存します。
エクスポートする時の設定をいじって保存する必要があります。
「glTF Embedded（.gltf）」というやつを選択しましょう。
このファイル1個でOKとなります。
【ThreeJS】
これはWebGL用のライブラリでしょうか？
そこまで詳しくないので詳細は省きますが、必要なファイルが数点ありますので、オリジナルで用意しておいたこちらのZIPをダウンロードすると早いかと思います。
ThreeJSファイル一式 : ダウンロード
公式のものを落としてきたい方はコチラからどうぞ。
three.js公式 : https://threejs.org/
【コード】
ファイル一式の中に「example.html」っていうのがあります。
それが例となります。
HTML
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="GLTFLoader.js"></script>
<script src="index.js"></script>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>
次に「index.js」なんですが、こちらの中に表示させる「gltf」ファイルを指定する箇所がありますので、自分のファイルに合わせて書き直してください。
例ではデフォで一式の中のitemフォルダ内に入ってる「PHPerロゴ」が指定されてます。
index.js
// 幅、高さ取得
const width = window.innerWidth;
const height = window.innerHeight;
// レンダラの作成、DOMに追加
const renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(width, height);
renderer.setClearColor(0xf3f3f3, 0);
document.body.appendChild(renderer.domElement);
// シーンの作成、カメラの作成と追加、ライトの作成と追加
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(0, 0, 4);
const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);
// OrbitControls の追加
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.userPan = false;
controls.userPanSpeed = 0.0;
controls.maxDistance = 5000.0;
controls.maxPolarAngle = Math.PI * 0.495;
controls.autoRotate = true;
controls.autoRotateSpeed = 1.0;
renderer.gammaOutput = true;
const loader = new THREE.GLTFLoader();
const url = 'item/logo.gltf';
const clock = new THREE.Clock();
let mixer;
// レンダリング
const animation = () => {
renderer.render(scene, camera);
controls.update();
if (mixer) {
mixer.update(clock.getDelta());
}
requestAnimationFrame(animation);
};
animation();
loader.load(url, (data) => {
const gltf = data;
const object = gltf.scene;
const animations = gltf.animations;
if (animations && animations.length) {
let i;
mixer = new THREE.AnimationMixer(object);
for (i = 0; i < animations.length; i ++ ) {
mixer.clipAction( animations[ i ] ).play();
}
}
scene.add(object);
});
ちなみにこの例では背景は透過させる設定にしてあります。
あと、ファイルパスの指定はもしWordpressとかでやる場合は絶対パスの指定になるようなので
const url = 'http://' + window.location.hostname + '/wp-content/themes/【テーマ名】/threejs/item/logo.gltf';
みたいな感じで書くといいかもです。
それでも絶対パスの取得がおかしい場合はこちらもお試しください。
bodyタグ
<body id="l-body" data-tmpdir="<?php echo esc_url(get_template_directory_uri()); ?>/">
JS呼び出し側
const url = $('#l-body').attr('data-tmpdir') + '/threejs/item/logo.gltf';
【DEMO】
上記のデモページはこちらとなります。
DEMO
まとめ
うまくいかない時はだいたいカメラの位置の指定とかだったりするようなので、その辺りを見直してみてください。
Blenderからgltfへ書き出す時点で何かしらミスってる場合があったりで最初大変だったのですが、そういう時にはビューワーで一度確かめてみるといいかもしれません。
glTF Viewer : https://gltf-viewer.donmccurdy.com/
gltfファイルがちゃんとうまくいってる事を先に確認しておくと捗りますね。
3DモデルをWEBサイト上で使っていけるようになるとまた幅が広がりますね。
現場から以上です！
4952
