#11 AR.jsのNFTでVRMモデルを表示する https://youtu.be/QhuukD7ppjo
基本情報
AR.jsを使ったImage Tracking
Natural Feature Tracking
自然特徴点の認識によるトラッキング
WebAR名刺の時に使ったような特別なマーカー画像ではなく,通常の画像をマーカーとしたWebARがAR.jsでも出来ます three.jsを使ったサンプルが公開されています。
これをもとに作っていきます。
オリジナルの画像をマーカーにする
Upload Imageからマーカ用の画像をアップロードします。
マーカーとしての適正が☆で表示されます。
シンプルな画像はマーカーに適していないみたいです
作ったパスタの画像は☆5でした。
https://gyazo.com/8c865aa0c00b59db6b40bf21381c959d
Generateでファイルをダウンロードします。
hoge.fset
hoge.fset3
hoge.iset
ファイルを適切な場所に配置したあとはTHREEx.ArMarkerControlsのdescriptorsUrlから指定します。
code:js
// init controls for camera
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
type: 'nft',
descriptorsUrl: 'data/dataNFT/marker',
changeMatrixMode: 'cameraTransformMatrix'
})
マーカーを差し替えたあとは動作を確認して下さい。
pixiv/three-vrmの使い方は割愛します。
など参考にしてください
スケールが合っていないかったり、メッシュが崩れてしまったりするので対応します。
THREE.WebGLRendererのlogarithmicDepthBufferをtrueに設定してください.
カメラのz-far,nearも調整してください.
code:js
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
logarithmicDepthBuffer: true,
});
const camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 1000, 10000); scene.add(camera);
アバターのスケールが小さいので調節します。
code:js
var root = new THREE.Group();
scene.add(root);
const loader = new THREE.GLTFLoader();
loader.load(
// URL of the VRM you want to load
'data/model.vrm',
// called when the resource is loaded
(gltf) => {
// generate a VRM instance from gltf
THREE.VRM.from(gltf).then((vrm) => {
const scale = 200;
// add the loaded vrm to the scene
vrm.scene.scale.set(scale, scale, scale);
root.add(vrm.scene);
vrm.scene.rotation.y = Math.PI;
vrm.scene.position.x = 80;
vrm.scene.position.z = -80;
loadJson("./data/data/pose.json", (json) => {
vrm.humanoid.setPose(json);
});
// deal with vrm features
console.log(vrm);
});
},
// called while loading is progressing
(progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
// called when loading has errors
(error) => console.error(error)
);
ポーズを設定する
棒立ちだと面白くないのでポーズをとらせてみます。
https://gyazo.com/6863d8924646bf95148edd8ef95d8c4e
メニューから保存・共有 > ポーズを保存 (.json)を押してjsonファイルをダウンロードして下さい.
jsonファイルを読み込んでそのままvrm.humanoid.setPose()でポーズを読み込みます.
code:js
loadJson("./data/data/pose.json", (json) => {
vrm.humanoid.setPose(json);
});
const loadJson = (path, callback) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.response);
}
};
xhr.responseType = 'json';
xhr.open('GET', path, true);
xhr.send();
};
完成！
https://gyazo.com/cf7566921ca753da887969b417556f74
サンプルはこちらから
参考