@xrift/world-components 0.11.0 → 0.12.1

package/README.md

@@ -479,6 +479,68 @@ function MyWorld() {
 - シェーダーを使用した軽量な実装です
 - シーンの背景色も自動的に設定されます
 
+### SpawnPoint コンポーネント
+
+ワールド内のプレイヤーのスポーン（出現）地点を指定するコンポーネントです。開発時には位置と向きを視覚的に確認できるヘルパーが表示されます。
+
+```tsx
+import { SpawnPoint } from '@xrift/world-components'
+
+function MyWorld() {
+  return (
+    <>
+      {/* 原点にスポーン、正面向き */}
+      <SpawnPoint />
+
+      {/* 位置と向きを指定 */}
+      <SpawnPoint position={[0, 0, 5]} yaw={180} />
+    </>
+  )
+}
+```
+
+#### Props
+
+| プロパティ | 型 | 必須 | デフォルト | 説明 |
+|-----------|-----|------|-----------|------|
+| `position` | `[number, number, number]` | - | `[0, 0, 0]` | スポーン位置 |
+| `yaw` | `number` | - | `0` | スポーン時の向き（度数法 0-360） |
+
+#### 開発時ヘルパー
+
+開発環境（`import.meta.env.DEV === true`）では、スポーン位置と向きを視覚的に確認できるヘルパーが表示されます：
+
+- 半透明の円柱（下から上にかけて透明度が増すグラデーション）
+- 黄緑色の矢印でスポーン方向を表示
+
+本番ビルドではヘルパーは表示されず、コードも含まれません。
+
+#### useSpawnPoint フック
+
+プラットフォーム側で現在設定されているスポーン地点を取得するフックです。
+
+```tsx
+import { useSpawnPoint } from '@xrift/world-components'
+
+function PlayerSpawner() {
+  const spawnPoint = useSpawnPoint()
+
+  useEffect(() => {
+    if (spawnPoint) {
+      player.position.set(...spawnPoint.position)
+      player.rotation.y = THREE.MathUtils.degToRad(spawnPoint.yaw)
+    }
+  }, [spawnPoint])
+
+  return null
+}
+```
+
+#### 注意事項
+
+- 1つのワールドに複数のSpawnPointがある場合、最後に設定されたものが有効になります
+- `useSpawnPoint`は主にプラットフォーム側（xrift-frontend）での使用を想定しています
+
 ## 開発
 
 ```bash

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

@@ -1,4 +1,9 @@
 import { type FC } from 'react';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        gradientCylinderMaterial: React.JSX.IntrinsicElements['shaderMaterial'];
+    }
+}
 export interface SpawnPointProps {
     /** スポーン位置 [x, y, z] */
     position?: [number, number, number];
@@ -15,7 +20,8 @@ export interface SpawnPointProps {
  * <SpawnPoint position={[0, 0, 5]} yaw={180} />
  *
  * @note
- * - 視覚的な表示はありません
+ * - 開発時（import.meta.env.DEV === true）のみヘルパー表示が有効になります
+ * - 本番ビルドにはヘルパーのコードが含まれません
  * - 1つのワールドに複数のSpawnPointがある場合、最後に設定されたものが有効になります
  */
 export declare const SpawnPoint: FC<SpawnPointProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SpawnPoint/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAa,MAAM,OAAO,CAAA;AAG1C,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,0BAA0B;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAW1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SpawnPoint/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAa,MAAM,OAAO,CAAA;AA8B1C,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAa;QACrB,wBAAwB,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;KACxE;CACF;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,0BAA0B;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+C1C,CAAA"}

package/dist/components/SpawnPoint/index.js

@@ -1,5 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
+import { shaderMaterial } from '@react-three/drei';
+import { extend } from '@react-three/fiber';
+import { DoubleSide } from 'three';
 import { useSpawnPointContext } from '../../contexts/SpawnPointContext';
+const GradientCylinderMaterial = shaderMaterial({ color: [0, 1, 0.53], opacity: 0.5 }, 
+// vertex shader
+`
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `, 
+// fragment shader
+`
+    uniform vec3 color;
+    uniform float opacity;
+    varying vec2 vUv;
+    void main() {
+      float alpha = opacity * (1.0 - vUv.y);
+      gl_FragColor = vec4(color, alpha);
+    }
+  `);
+extend({ GradientCylinderMaterial });
 /**
  * ワールド内のリスポーン地点を指定するコンポーネント
  * ワールド作成者がこのコンポーネントを配置することで、
@@ -10,14 +34,21 @@ import { useSpawnPointContext } from '../../contexts/SpawnPointContext';
  * <SpawnPoint position={[0, 0, 5]} yaw={180} />
  *
  * @note
- * - 視覚的な表示はありません
+ * - 開発時（import.meta.env.DEV === true）のみヘルパー表示が有効になります
+ * - 本番ビルドにはヘルパーのコードが含まれません
  * - 1つのワールドに複数のSpawnPointがある場合、最後に設定されたものが有効になります
  */
 export const SpawnPoint = ({ position = [0, 0, 0], yaw = 0, }) => {
     const { setSpawnPoint } = useSpawnPointContext();
+    const yawRad = (yaw * Math.PI) / 180;
     useEffect(() => {
         setSpawnPoint({ position, yaw });
     }, [position, yaw, setSpawnPoint]);
-    return null;
+    // Vite以外の環境では import.meta.env が存在しない可能性があるため安全にアクセス
+    const isDev = typeof import.meta !== 'undefined' && import.meta.env?.DEV;
+    if (!isDev) {
+        return null;
+    }
+    return (_jsxs("group", { position: position, children: [_jsxs("mesh", { position: [0, 0.375, 0], children: [_jsx("cylinderGeometry", { args: [0.5, 0.5, 0.75, 32, 1, true] }), _jsx("gradientCylinderMaterial", { transparent: true, side: DoubleSide, depthWrite: false })] }), _jsx("group", { rotation: [0, -yawRad, 0], children: _jsxs("group", { rotation: [0, Math.PI, 0], children: [_jsxs("mesh", { position: [0, 0.3, -0.1], rotation: [Math.PI / 2, 0, 0], children: [_jsx("cylinderGeometry", { args: [0.03, 0.03, 0.3, 8] }), _jsx("meshBasicMaterial", { color: "#00ff88" })] }), _jsxs("mesh", { position: [0, 0.3, 0.12], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.15, 8] }), _jsx("meshBasicMaterial", { color: "#00ff88" })] })] }) })] }));
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SpawnPoint/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AASvE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACpB,GAAG,GAAG,CAAC,GACR,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAA;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC,CAAA;IAElC,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SpawnPoint/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAEvE,MAAM,wBAAwB,GAAG,cAAc,CAC7C,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE;AACrC,gBAAgB;AAChB;;;;;;GAMC;AACD,kBAAkB;AAClB;;;;;;;;GAQC,CACF,CAAA;AAED,MAAM,CAAC,EAAE,wBAAwB,EAAE,CAAC,CAAA;AAepC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACpB,GAAG,GAAG,CAAC,GACR,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAChD,MAAM,MAAM,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAA;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC,CAAA;IAElC,oDAAoD;IACpD,MAAM,KAAK,GAAG,OAAO,MAAM,CAAC,IAAI,KAAK,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAA;IACxE,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,iBAAO,QAAQ,EAAE,QAAQ,aAEvB,gBAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,aAC3B,2BAAkB,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,GAAI,EACzD,mCACE,WAAW,QACX,IAAI,EAAE,UAAU,EAChB,UAAU,EAAE,KAAK,GACjB,IACG,EAGP,gBAAO,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,YAE9B,iBAAO,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,aAE9B,gBAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,aAC3D,2BAAkB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,GAAI,EAChD,4BAAmB,KAAK,EAAC,SAAS,GAAG,IAChC,EAEP,gBAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,aAC3D,uBAAc,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,GAAI,EACvC,4BAAmB,KAAK,EAAC,SAAS,GAAG,IAChC,IACD,GACF,IACF,CACT,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xrift/world-components",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Shared components and utilities for Xrift worlds",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",