AIdentity

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

r3f-custom.d.ts (1467B)

      1 // THREEとR3Fの型をインポート
      2 import * as THREE from 'three';
      3 
      4 // OilArtMaterial のユニフォーム型を定義
      5 interface OilArtUniforms {
      6   u_time?: number;
      7   u_resolution?: THREE.Vector2;
      8   u_dropPosition?: THREE.Vector2;
      9   u_dropColor?: THREE.Color;
     10   u_dropRadius?: number;
     11   u_tiltDirection?: THREE.Vector2;
     12   u_feedbackTexture?: THREE.Texture | null;
     13 }
     14 
     15 // @react-three/fiber のモジュールを拡張することで、カスタム要素の型を認識させる
     16 declare module '@react-three/fiber' {
     17   // ThreeElements インターフェースに新しい要素を追加します
     18   export interface ThreeElements {
     19     oilArtMaterial: ThreeElements['shaderMaterial'] & OilArtUniforms;
     20   }
     21 }
     22 
     23 interface WaterMaterialProps extends THREE.ShaderMaterialParameters {
     24   uTime: number;
     25   uDropPosition: THREE.Vector3;
     26   uDropTime: number;
     27 }
     28 
     29 // 2. JSXの組み込み要素 (IntrinsicElements) に新しいタグを追加
     30 //    これにより、R3Fが 'waterMaterial' を認識し、
     31 //    Reactがそのプロパティの型チェックを行えるようになります。
     32 declare global {
     33   namespace JSX {
     34     interface IntrinsicElements {
     35       // JSXタグ名 'waterMaterial' に WaterMaterialProps を関連付け
     36       waterMaterial: WaterMaterialProps & {
     37         // refを使用する場合のために THREE.ShaderMaterial も追加
     38         ref?: React.Ref<THREE.ShaderMaterial>; 
     39       };
     40     }
     41   }
     42 }