Babylon.jsでgltfファイルを読み込む
gltfはBlenderでつくることにします。まずはなんでもいいので適当な造形をしてください。
で、Exportからgltfで書き出します。モディファイアーを適用にチェックがないと残念なことになるので注意。
今回はImportMesh
します。第一引数に空文字を渡すとすべてのメッシュを読み込みます。['Face', 'Nose']
みたいにメッシュ名を配列で渡すと、それだけ読んでくれます。メッシュ名ってのはここのことです。
import { Engine, Scene, ArcRotateCamera, HemisphericLight, Vector3, Color3, Color4, SceneLoader } from '@babylonjs/core' import '@babylonjs/loaders/glTF' // これ重要 import boxUrl from '../assets/gltf/face.gltf' const canvas = document.querySelector('canvas') const engine = new Engine(canvas, true) const scene = new Scene(engine) scene.clearColor = Color4.FromHexString('#12345678') const light = new HemisphericLight('light', new Vector3(-1, 1, 0), scene) light.diffuse = Color3.White() const camera = new ArcRotateCamera('camera', Math.PI / 3, Math.PI / 4, 10, Vector3.Zero(), scene) camera.attachControl(canvas, true) SceneLoader.ImportMesh('', boxUrl, undefined, scene, (meshes, particleSystems, skeletons) => { // console.log(meshes) してみるなど }) engine.runRenderLoop(() => { scene.render() }) window.addEventListener('resize', () => { engine.resize() })
ブラウザ開いて
全部ぶん投げるけど、詳しいことはドキュメントを読んでください。