Zenn
Closed12

8thwall + Vite + TypeScript + Babylonjsの試行

TypeScript
WebAR
Vite
Babylon.js
8th Wall
にー兄さんにー兄さん

8thwallをtsで開発するノウハウがネットになさ過ぎるので試行するもの
セルフホストのサンプルを見る限りだとdev鯖が建てられればホストはできそうなので、いったんそれでやってみる
Viteでやる

にー兄さんにー兄さん

型定義しつつ、ちょっとハマりながらもいろいろやってたら
ついに豆腐を出せた

にー兄さんにー兄さん

サンプルとしてHit Testを実装した
Hit TestのためにはXrControllerなるものが必要だったのでそのための型定義もした

interface XrController {
  hitTest(
    X: number,
    Y: number,
    includedTypes: HitTestType[] = []
  ): HitTestResult[];
  configure(): void;
  pipelineModule(): any;
}

interface XR8 {
  XrController: XrController;
}

type HitTestType =
  | 'FEATURE_POINT'
  | 'ESTIMATED_SURFACE'
  | 'DETECTED_SURFACE'
  | 'UNSPECIFIED';

interface Vector3 {
  x: number;
  y: number;
  z: number;
}

interface Vector4 {
  x: number;
  y: number;
  z: number;
  w: number;
}

interface HitTestResult {
  type: HitTestType;
  position: Vector3;
  rotation: Vector4;
  distance: number;
}
このスクラップは2023/06/04にクローズされました