react-three-game 0.0.8 → 0.0.10

package/README.md

@@ -30,6 +30,33 @@ Scenes are JSON prefabs. Components are registered modules. Hierarchy is declara
 }} />
 ```
 
+## Tailwind CSS Support
+
+This library uses Tailwind CSS for styling its editor components. To ensure styles are correctly applied in your application, you need to configure Tailwind to scan the library's source files.
+
+### Tailwind v4
+
+Add the library path to your CSS entry point using the `@source` directive:
+
+```css
+@import "tailwindcss";
+@source "../../node_modules/react-three-game/dist/**/*.{js,ts,jsx,tsx}";
+```
+
+### Tailwind v3
+
+Add the library path to your `tailwind.config.js`:
+
+```js
+module.exports = {
+  content: [
+    // ...
+    "./node_modules/react-three-game/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  // ...
+}
+```
+
 ## Quick Start
 
 ```bash

package/dist/tools/dragdrop/modelLoader.d.ts

@@ -4,4 +4,4 @@ export type ModelLoadResult = {
     error?: any;
 };
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
-export declare function loadModel(filename: string, resourcePath?: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;
+export declare function loadModel(filename: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;

package/dist/tools/dragdrop/modelLoader.js

@@ -14,11 +14,11 @@ dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
 const gltfLoader = new GLTFLoader();
 gltfLoader.setDRACOLoader(dracoLoader);
 const fbxLoader = new FBXLoader();
-export function loadModel(filename_1) {
-    return __awaiter(this, arguments, void 0, function* (filename, resourcePath = "", onProgress) {
+export function loadModel(filename, onProgress) {
+    return __awaiter(this, void 0, void 0, function* () {
         try {
-            // Construct full path - handle empty resourcePath to avoid double slashes
-            const fullPath = resourcePath ? `${resourcePath}/${filename}` : filename;
+            // Use filename directly (should already include leading /)
+            const fullPath = filename;
             if (filename.endsWith('.glb') || filename.endsWith('.gltf')) {
                 return new Promise((resolve) => {
                     gltfLoader.load(fullPath, (gltf) => resolve({ success: true, model: gltf.scene }), (progressEvent) => {

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -108,7 +108,9 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             for (const filename of modelsToLoad) {
                 if (!loadedModels[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const result = yield loadModel(filename, basePath);
+                    // Load model directly from public root, prepend "/" if not present
+                    const modelPath = filename.startsWith('/') ? filename : `/${filename}`;
+                    const result = yield loadModel(modelPath);
                     if (result.success && result.model) {
                         setLoadedModels(prev => (Object.assign(Object.assign({}, prev), { [filename]: result.model })));
                     }
@@ -118,7 +120,8 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             for (const filename of texturesToLoad) {
                 if (!loadedTextures[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const texturePath = basePath ? `${basePath}/${filename}` : filename;
+                    // Load texture directly from public root, prepend "/" if not present
+                    const texturePath = filename.startsWith('/') ? filename : `/${filename}`;
                     textureLoader.load(texturePath, (texture) => {
                         texture.colorSpace = SRGBColorSpace;
                         setLoadedTextures(prev => (Object.assign(Object.assign({}, prev), { [filename]: texture })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/tools/dragdrop/modelLoader.ts

@@ -19,12 +19,11 @@ const fbxLoader = new FBXLoader();
 
 export async function loadModel(
     filename: string,
-    resourcePath: string = "",
     onProgress?: ProgressCallback
 ): Promise<ModelLoadResult> {
     try {
-        // Construct full path - handle empty resourcePath to avoid double slashes
-        const fullPath = resourcePath ? `${resourcePath}/${filename}` : filename;
+        // Use filename directly (should already include leading /)
+        const fullPath = filename;
 
         if (filename.endsWith('.glb') || filename.endsWith('.gltf')) {
             return new Promise((resolve) => {

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -133,7 +133,9 @@ export const PrefabRoot = forwardRef<Group, {
             for (const filename of modelsToLoad) {
                 if (!loadedModels[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const result = await loadModel(filename, basePath);
+                    // Load model directly from public root, prepend "/" if not present
+                    const modelPath = filename.startsWith('/') ? filename : `/${filename}`;
+                    const result = await loadModel(modelPath);
                     if (result.success && result.model) {
                         setLoadedModels(prev => ({ ...prev, [filename]: result.model }));
                     }
@@ -144,7 +146,8 @@ export const PrefabRoot = forwardRef<Group, {
             for (const filename of texturesToLoad) {
                 if (!loadedTextures[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const texturePath = basePath ? `${basePath}/${filename}` : filename;
+                    // Load texture directly from public root, prepend "/" if not present
+                    const texturePath = filename.startsWith('/') ? filename : `/${filename}`;
                     textureLoader.load(texturePath, (texture) => {
                         texture.colorSpace = SRGBColorSpace;
                         setLoadedTextures(prev => ({ ...prev, [filename]: texture }));

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6",                           
-    "lib": ["ES2017", "DOM"],                  
-    "module": "ESNext",                        
-    "jsx": "react-jsx",                        
-    "declaration": true,                       
-    "declarationDir": "dist",                  
-    "outDir": "dist",                          
-    "strict": true,                           
-    "esModuleInterop": true,                  
-    "skipLibCheck": true,                     
-    "moduleResolution": "bundler",               
-    "allowSyntheticDefaultImports": true      
-  },
-  "include": ["src"],                          
-  "exclude": ["node_modules", "dist"]          
-}