電脳メガネ、Meta Quest Pro、A-Frameで作ったアプリだとコントローラーが認識しなかったりするので、
webxr-samplesをベースに作ってみるチャレンジ!ひとまず空間にボックスの表示ができました。
「AR sundome」src on GitHub
左右のコントローラー、トリガーを引くたびにどんどん赤い半透明なボックスが出現します。
ボックス作成のコードは、createCube.js としてまとめて、importしています。
import { BoxBuilder } from "https://immersive-web.github.io/webxr-samples/js/render/geometry/box-builder.js";
import { PrimitiveStream } from "https://immersive-web.github.io/webxr-samples/js/render/geometry/primitive-stream.js";
import { Node } from "https://immersive-web.github.io/webxr-samples/js/render/core/node.js";
import { CubeMaterial } from "./CubeMaterial.js";
export const createCube = (renderer, pos, size) => {
const stream = new PrimitiveStream();
const boxbuilder = new BoxBuilder(stream);
boxbuilder.pushCube(pos, size);
const primitive = boxbuilder.finishPrimitive(renderer);
const rprim = renderer.createRenderPrimitive(primitive, new CubeMaterial());
const node = new Node();
node.addRenderPrimitive(rprim);
return node;
};
他に依存なしのコンパクトな3Dライブラリとなっていていい感じです!
見てみたい方、ものづくりの祭典「NT鯖江2022」でメタバース体験、マイクラ風体験やってます。土曜日15樹まではMeta Quest Pro、あります!
Let's create サイバースペース!