@xrift/world-components 0.1.0 → 0.2.1

package/README.md

@@ -0,0 +1,100 @@
+# @xrift/world-components
+
+Xrift ワールド開発用の共有コンポーネントとユーティリティライブラリです。
+
+## インストール
+
+```bash
+npm install @xrift/world-components
+```
+
+## 必要な依存関係
+
+以下のパッケージがpeerDependenciesとして必要です：
+
+```json
+{
+  "react": "^18.0.0 || ^19.0.0",
+  "@react-three/fiber": "^8.0.0",
+  "@react-three/drei": "^9.0.0",
+  "three": "^0.150.0"
+}
+```
+
+## 機能
+
+### XRiftContext
+
+ワールドの基本情報（ベースURLなど）を提供するContextです。
+
+```tsx
+import { XRiftProvider, useXRift } from '@xrift/world-components'
+
+// Providerでワールドをラップ
+function App() {
+  return (
+    <XRiftProvider baseUrl="https://assets.xrift.net/users/xxx/worlds/yyy/hash123/">
+      <MyWorld />
+    </XRiftProvider>
+  )
+}
+
+// ワールド内でbaseUrlを取得
+function MyWorld() {
+  const { baseUrl } = useXRift()
+  const gltf = useGLTF(baseUrl + 'assets/model.glb')
+
+  return <primitive object={gltf.scene} />
+}
+```
+
+### Interactable コンポーネント
+
+3Dオブジェクトをインタラクション可能にするラッパーコンポーネントです。
+
+```tsx
+import { Interactable } from '@xrift/world-components'
+
+function MyWorld() {
+  const handleButtonClick = (id: string) => {
+    console.log(`${id} がクリックされました！`)
+  }
+
+  return (
+    <Interactable
+      id="my-button"
+      onInteract={handleButtonClick}
+      interactionText="ボタンを押す"
+    >
+      <mesh position={[0, 1, -3]}>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color="blue" />
+      </mesh>
+    </Interactable>
+  )
+}
+```
+
+#### Props
+
+| プロパティ | 型 | 必須 | デフォルト | 説明 |
+|-----------|-----|------|-----------|------|
+| `id` | `string` | ✓ | - | オブジェクトの一意なID |
+| `onInteract` | `(id: string) => void` | ✓ | - | インタラクション時のコールバック |
+| `interactionText` | `string` | - | `"クリックする"` | インタラクション時に表示するテキスト |
+| `enabled` | `boolean` | - | `true` | インタラクション可能かどうか |
+| `children` | `ReactNode` | ✓ | - | 3Dオブジェクト |
+
+## 開発
+
+```bash
+# 開発モード（ウォッチモード）
+npm run dev
+
+# ビルド
+npm run build
+```
+
+## ライセンス
+
+MIT

package/dist/components/Interactable/index.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import type { Props } from './types';
+export declare const Interactable: FC<Props>;
+export type { Props as InteractableProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Interactable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Interactable/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6D,KAAK,EAAE,EAAE,MAAM,OAAO,CAAA;AAG1F,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,KAAK,CAkFlC,CAAA;AAED,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Interactable/index.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Outlines } from '@react-three/drei';
+import { Children, cloneElement, isValidElement, useEffect, useRef } from 'react';
+import { useXRift } from '../../contexts/XRiftContext';
+const INTERACTABLE_LAYER = 10;
+export const Interactable = ({ id, type = 'button', onInteract, interactionText, enabled = true, children, }) => {
+    const { currentTarget } = useXRift();
+    const groupRef = useRef(null);
+    // userDataにインタラクション情報を設定 & レイヤー設定
+    useEffect(() => {
+        const object = groupRef.current;
+        if (!object)
+            return;
+        // userDataにインタラクション情報を設定
+        const interactableData = {
+            id,
+            type,
+            onInteract,
+            interactionText,
+            enabled,
+        };
+        Object.assign(object.userData, interactableData);
+        // レイヤーを設定（レイキャスト最適化のため）
+        object.traverse((child) => {
+            child.layers.enable(INTERACTABLE_LAYER);
+        });
+        // クリーンアップ: userDataからインタラクション情報を削除
+        return () => {
+            if (object.userData) {
+                delete object.userData.id;
+                delete object.userData.type;
+                delete object.userData.onInteract;
+                delete object.userData.interactionText;
+                delete object.userData.enabled;
+            }
+            // レイヤーを無効化
+            object.traverse((child) => {
+                child.layers.disable(INTERACTABLE_LAYER);
+            });
+        };
+    }, [id, type, onInteract, interactionText, enabled]);
+    // 現在のターゲットかどうかで視覚的フィードバックを提供
+    const isTargeted = currentTarget !== null && currentTarget.uuid === groupRef.current?.uuid;
+    // 子要素（mesh）に<Outlines>を追加
+    const childrenWithOutlines = Children.map(children, (child) => {
+        if (!isValidElement(child))
+            return child;
+        // meshの子要素として<Outlines>を追加
+        return cloneElement(child, {
+            children: (_jsxs(_Fragment, { children: [child.props.children, isTargeted && enabled && (_jsx(Outlines, { thickness: 5, color: "#4dabf7", screenspace: false, opacity: 1, transparent: false, angle: Math.PI }))] })),
+        });
+    });
+    return (_jsx("group", { ref: groupRef, children: childrenWithOutlines }));
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Interactable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Interactable/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAW,MAAM,OAAO,CAAA;AAE1F,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGtD,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAE7B,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,EAAE,EACF,IAAI,GAAG,QAAQ,EACf,UAAU,EACV,eAAe,EACf,OAAO,GAAG,IAAI,EACd,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,QAAQ,EAAE,CAAA;IACpC,MAAM,QAAQ,GAAG,MAAM,CAAQ,IAAI,CAAC,CAAA;IAEpC,kCAAkC;IAClC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAA;QAC/B,IAAI,CAAC,MAAM;YAAE,OAAM;QAEnB,yBAAyB;QACzB,MAAM,gBAAgB,GAAG;YACvB,EAAE;YACF,IAAI;YACJ,UAAU;YACV,eAAe;YACf,OAAO;SACR,CAAA;QAED,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;QAEhD,wBAAwB;QACxB,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;YACxB,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAA;QACzC,CAAC,CAAC,CAAA;QAEF,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACV,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACpB,OAAO,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAA;gBACzB,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAA;gBAC3B,OAAO,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAA;gBACjC,OAAO,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAA;gBACtC,OAAO,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAA;YAChC,CAAC;YAED,WAAW;YACX,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;gBACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAA;YAC1C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAA;IAEpD,6BAA6B;IAC7B,MAAM,UAAU,GAAG,aAAa,KAAK,IAAI,IAAI,aAAa,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAA;IAE1F,0BAA0B;IAC1B,MAAM,oBAAoB,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC5D,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAA;QAExC,2BAA2B;QAC3B,OAAO,YAAY,CAAC,KAAK,EAAE;YACzB,QAAQ,EAAE,CACR,8BAEI,KAAK,CAAC,KAAa,CAAC,QAAQ,EAC7B,UAAU,IAAI,OAAO,IAAI,CACxB,KAAC,QAAQ,IACP,SAAS,EAAE,CAAC,EACZ,KAAK,EAAC,SAAS,EACf,WAAW,EAAE,KAAK,EAClB,OAAO,EAAE,CAAC,EACV,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,EAAE,GACd,CACH,IACA,CACJ;SACO,CAAC,CAAA;IACb,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,gBAAO,GAAG,EAAE,QAAQ,YACjB,oBAAoB,GACf,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Interactable/types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface Props {
+    /** オブジェクトの一意なID */
+    id: string;
+    /** オブジェクトの種類 */
+    type?: 'button';
+    /** インタラクション時のコールバック（オブジェクトのIDが渡される） */
+    onInteract: (id: string) => void;
+    /** インタラクション時に表示するテキスト */
+    interactionText?: string;
+    /** インタラクション可能かどうか */
+    enabled?: boolean;
+    /** 子要素（3Dオブジェクト） */
+    children: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Interactable/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Interactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,KAAK;IACpB,mBAAmB;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,gBAAgB;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,uCAAuC;IACvC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,yBAAyB;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB"}

package/dist/components/Interactable/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/Interactable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Interactable/types.ts"],"names":[],"mappings":""}

package/dist/contexts/XRiftContext.d.ts

@@ -1,10 +1,16 @@
 import { type ReactNode } from 'react';
+import type { Object3D } from 'three';
 export interface XRiftContextValue {
     /**
      * ワールドのベースURL（CDNのディレクトリパス）
      * 例: 'https://assets.xrift.net/users/xxx/worlds/yyy/hash123/'
      */
     baseUrl: string;
+    /**
+     * 現在レイキャストでターゲットされているオブジェクト
+     * xrift-frontend側のRaycastDetectorが設定する
+     */
+    currentTarget: Object3D | null;
 }
 /**
  * XRift ワールドの情報を提供するContext
@@ -13,6 +19,7 @@ export interface XRiftContextValue {
 export declare const XRiftContext: import("react").Context<XRiftContextValue | null>;
 interface Props {
     baseUrl: string;
+    currentTarget?: Object3D | null;
     children: ReactNode;
 }
 /**
@@ -20,7 +27,7 @@ interface Props {
  * Module Federationで動的にロードされたワールドコンポーネントに
  * 必要な情報を注入するために使用
  */
-export declare const XRiftProvider: ({ baseUrl, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const XRiftProvider: ({ baseUrl, currentTarget, children }: Props) => import("react/jsx-runtime").JSX.Element;
 /**
  * XRift ワールドの情報を取得するhook
  * ワールドプロジェクト側でアセットの相対パスを絶対パスに変換する際に使用

package/dist/contexts/XRiftContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XRiftContext.d.ts","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAEjE,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;CAKhB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAA;AAEzE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,uBAAuB,KAAK,4CAMzD,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,QAAO,iBAQ3B,CAAA"}
+{"version":3,"file":"XRiftContext.d.ts","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,aAAa,EAAE,QAAQ,GAAG,IAAI,CAAA;CAK/B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAA;AAEzE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC/B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,sCAA6C,KAAK,4CAW/E,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,QAAO,iBAQ3B,CAAA"}

package/dist/contexts/XRiftContext.js

@@ -10,8 +10,11 @@ export const XRiftContext = createContext(null);
  * Module Federationで動的にロードされたワールドコンポーネントに
  * 必要な情報を注入するために使用
  */
-export const XRiftProvider = ({ baseUrl, children }) => {
-    return (_jsx(XRiftContext.Provider, { value: { baseUrl }, children: children }));
+export const XRiftProvider = ({ baseUrl, currentTarget = null, children }) => {
+    return (_jsx(XRiftContext.Provider, { value: {
+            baseUrl,
+            currentTarget,
+        }, children: children }));
 };
 /**
  * XRift ワールドの情報を取得するhook

package/dist/contexts/XRiftContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"XRiftContext.js","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAA;AAcjE;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAOzE;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,YACtC,QAAQ,GACa,CACzB,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAsB,EAAE;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAExC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;IAC/D,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}
+{"version":3,"file":"XRiftContext.js","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAA;AAoBjE;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAQzE;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,aAAa,GAAG,IAAI,EAAE,QAAQ,EAAS,EAAE,EAAE;IAClF,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,OAAO;YACP,aAAa;SACd,YAEA,QAAQ,GACa,CACzB,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAsB,EAAE;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAExC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;IAC/D,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { XRiftContext, XRiftProvider, useXRift, type XRiftContextValue, } from './contexts/XRiftContext';
+export { Interactable, type InteractableProps, } from './components/Interactable';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,KAAK,iBAAiB,GACvB,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,KAAK,iBAAiB,GACvB,MAAM,yBAAyB,CAAA;AAGhC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAA"}

package/dist/index.js

@@ -1,3 +1,5 @@
 // Contexts
 export { XRiftContext, XRiftProvider, useXRift, } from './contexts/XRiftContext';
+// Components
+export { Interactable, } from './components/Interactable';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,WAAW;AACX,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,GAET,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,WAAW;AACX,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,GAET,MAAM,yBAAyB,CAAA;AAEhC,aAAa;AACb,OAAO,EACL,YAAY,GAEb,MAAM,2BAA2B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xrift/world-components",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Shared components and utilities for Xrift worlds",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,10 +29,17 @@
   },
   "homepage": "https://github.com/WebXR-JP/xrift-world-components#readme",
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0"
+    "@react-three/drei": "^10.0.0",
+    "@react-three/fiber": "^9.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "three": "^0.170.0"
   },
   "devDependencies": {
+    "@react-three/drei": "^10.7.6",
+    "@react-three/fiber": "^9.4.0",
     "@types/react": "^18.3.12",
+    "@types/three": "^0.181.0",
+    "three": "^0.181.0",
     "typescript": "^5.6.3"
   }
 }