mmag

ハマったことメモなど

Babylon.jsでgltfファイルを読み込む

gltfBlenderでつくることにします。まずはなんでもいいので適当な造形をしてください。

f:id:Joe_noh:20210710154936p:plain

で、Exportからgltfで書き出します。モディファイアーを適用にチェックがないと残念なことになるので注意。

f:id:Joe_noh:20210710155306p:plain:w300

今回はImportMeshします。第一引数に空文字を渡すとすべてのメッシュを読み込みます。['Face', 'Nose']みたいにメッシュ名を配列で渡すと、それだけ読んでくれます。メッシュ名ってのはここのことです。

f:id:Joe_noh:20210710155007p:plain:w300

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()
})

ブラウザ開いて

f:id:Joe_noh:20210710154859p:plain

全部ぶん投げるけど、詳しいことはドキュメントを読んでください。

GLTFLoader | Babylon.js Documentation