react-three-game 0.0.40 → 0.0.42

package/dist/shared/GameCanvas.js

@@ -1,4 +1,3 @@
-"use client";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {

package/dist/tools/assetviewer/page.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Canvas, useLoader } from "@react-three/fiber";
 import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";

package/dist/tools/dragdrop/DragDropLoader.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // DragDropLoader.tsx
 import { useEffect } from "react";

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -1,4 +1,3 @@
-"use client";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,7 +37,8 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "three": "^0.182.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
   },
   "dependencies": {
     "react-error-boundary": "^6.0.0"

package/src/shared/GameCanvas.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Canvas, extend, CanvasProps } from "@react-three/fiber";
 import { WebGPURenderer, MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial, PCFShadowMap } from "three/webgpu";
 import { Suspense, useState } from "react";

package/src/tools/assetviewer/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Canvas, useLoader } from "@react-three/fiber";
 import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";
 import { Suspense, useEffect, useState, useRef } from "react";

package/src/tools/dragdrop/DragDropLoader.tsx

@@ -1,4 +1,3 @@
-"use client";
 // DragDropLoader.tsx
 import { useEffect, ChangeEvent } from "react";
 import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import { Prefab } from "./types";

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { MapControls, TransformControls, useHelper } from "@react-three/drei";
 import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { BoxHelper, Euler, Group, Matrix4, Object3D, Quaternion, SRGBColorSpace, Texture, TextureLoader, Vector3, } from "three";

package/dist/shared/extend-three.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/shared/extend-three.js

@@ -1,13 +0,0 @@
-import { extend } from "@react-three/fiber";
-import * as THREE from "three";
-import * as WEBGPU from "three/webgpu";
-console.log('EXTENDING THREE NAMESPACE');
-console.log('THREE keys:', Object.keys(THREE).length);
-console.log('Has Canvas?', 'Canvas' in THREE);
-console.log('Has AmbientLight?', 'AmbientLight' in THREE);
-console.log('Has GridHelper?', 'GridHelper' in THREE);
-// Extend entire THREE namespace to support all THREE objects in JSX
-// This must happen before any Canvas components are created
-extend(THREE);
-extend(WEBGPU);
-console.log('THREE NAMESPACE EXTENDED');

package/dist/tools/loading/GameWithLoader.d.ts

@@ -1,6 +0,0 @@
-import { ReactElement } from "react";
-export default function GameWithLoader({ children }: {
-    children: ReactElement<{
-        onCanvasReady?: () => void;
-    }>;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/tools/loading/GameWithLoader.js

@@ -1,8 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useState } from "react";
-import LoadingSpinner from "../../sketches/loading/loading";
-export default function GameWithLoader({ children }) {
-    const [isCanvasReady, setIsCanvasReady] = useState(false);
-    return (_jsxs(_Fragment, { children: [!isCanvasReady && _jsx(LoadingSpinner, {}), cloneElement(children, { onCanvasReady: () => setIsCanvasReady(true) })] }));
-}

package/dist/tools/loading/loading.d.ts

@@ -1,2 +0,0 @@
-declare const LoadingSpinner: () => import("react/jsx-runtime").JSX.Element;
-export default LoadingSpinner;

package/dist/tools/loading/loading.js

@@ -1,38 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-const lines = [
-    "$ initializing...",
-    "✓ loading scene",
-    "✓ ready"
-];
-const LoadingSpinner = () => {
-    const [index, setIndex] = useState(0);
-    useEffect(() => {
-        if (index < lines.length) {
-            const timer = setTimeout(() => setIndex(index + 1), 300);
-            return () => clearTimeout(timer);
-        }
-    }, [index]);
-    return (_jsxs("div", { className: "terminal-loading", children: [lines.slice(0, index).map((line, i) => (_jsx("div", { children: line }, i))), _jsx("div", { className: "cursor", children: "\u2588" }), _jsx("style", { jsx: true, children: `
-                .terminal-loading {
-                    position: fixed;
-                    inset: 0;
-                    z-index: 50;
-                    background: #0a0a0a;
-                    color: #00ff00;
-                    font-family: monospace;
-                    padding: 2rem;
-                    font-size: 14px;
-                }
-
-                .cursor {
-                    animation: blink 1s infinite;
-                }
-
-                @keyframes blink {
-                    50% { opacity: 0; }
-                }
-            ` })] }));
-};
-export default LoadingSpinner;

package/dist/tools/prefabeditor/ExportHelper.d.ts

@@ -1,7 +0,0 @@
-export declare const SCREENSHOT_EVENT = "prefab-editor-screenshot";
-export declare const EXPORT_GLB_EVENT = "prefab-editor-export-glb";
-export declare function ExportHelper({ prefabName }: {
-    prefabName: string;
-}): null;
-export declare function triggerScreenshot(): void;
-export declare function triggerExportGLB(): void;

package/dist/tools/prefabeditor/ExportHelper.js

@@ -1,55 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useThree } from "@react-three/fiber";
-import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
-// Custom events for triggering exports
-export const SCREENSHOT_EVENT = "prefab-editor-screenshot";
-export const EXPORT_GLB_EVENT = "prefab-editor-export-glb";
-export function ExportHelper({ prefabName }) {
-    const { gl, scene } = useThree();
-    const sceneRef = useRef(scene);
-    useEffect(() => {
-        sceneRef.current = scene;
-    }, [scene]);
-    useEffect(() => {
-        const handleScreenshot = () => {
-            const canvas = gl.domElement;
-            canvas.toBlob((blob) => {
-                if (!blob)
-                    return;
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `${prefabName || 'screenshot'}.png`;
-                a.click();
-                URL.revokeObjectURL(url);
-            });
-        };
-        const handleExportGLB = () => {
-            const exporter = new GLTFExporter();
-            exporter.parse(sceneRef.current, (result) => {
-                const blob = new Blob([result], { type: 'application/octet-stream' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `${prefabName || 'scene'}.glb`;
-                a.click();
-                URL.revokeObjectURL(url);
-            }, (error) => {
-                console.error('Error exporting GLB:', error);
-            }, { binary: true });
-        };
-        window.addEventListener(SCREENSHOT_EVENT, handleScreenshot);
-        window.addEventListener(EXPORT_GLB_EVENT, handleExportGLB);
-        return () => {
-            window.removeEventListener(SCREENSHOT_EVENT, handleScreenshot);
-            window.removeEventListener(EXPORT_GLB_EVENT, handleExportGLB);
-        };
-    }, [gl, prefabName]);
-    return null;
-}
-export function triggerScreenshot() {
-    window.dispatchEvent(new Event(SCREENSHOT_EVENT));
-}
-export function triggerExportGLB() {
-    window.dispatchEvent(new Event(EXPORT_GLB_EVENT));
-}

package/dist/tools/prefabeditor/components/RotatorComponent.d.ts

@@ -1,3 +0,0 @@
-import { Component } from "./ComponentRegistry";
-declare const RotatorComponent: Component;
-export default RotatorComponent;

package/dist/tools/prefabeditor/components/RotatorComponent.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFrame } from "@react-three/fiber";
-import { useRef } from "react";
-function RotatorComponentEditor({ component, onUpdate }) {
-    var _a, _b;
-    const props = {
-        speed: (_a = component.properties.speed) !== null && _a !== void 0 ? _a : 1.0,
-        axis: (_b = component.properties.axis) !== null && _b !== void 0 ? _b : 'y'
-    };
-    return _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Rotation Speed" }), _jsx("input", { type: "number", step: "0.1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.speed, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { speed: parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Rotation Axis" }), _jsxs("select", { className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.axis, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { axis: e.target.value })), children: [_jsx("option", { value: "x", children: "X" }), _jsx("option", { value: "y", children: "Y" }), _jsx("option", { value: "z", children: "Z" })] })] })] });
-}
-// The view component for Rotator
-function RotatorView({ properties, children }) {
-    var _a, _b;
-    const groupRef = useRef(null);
-    const speed = (_a = properties.speed) !== null && _a !== void 0 ? _a : 1.0;
-    const axis = (_b = properties.axis) !== null && _b !== void 0 ? _b : 'y';
-    useFrame((state, delta) => {
-        if (groupRef.current) {
-            if (axis === 'x') {
-                groupRef.current.rotation.x += delta * speed;
-            }
-            else if (axis === 'y') {
-                groupRef.current.rotation.y += delta * speed;
-            }
-            else if (axis === 'z') {
-                groupRef.current.rotation.z += delta * speed;
-            }
-        }
-    });
-    return (_jsx("group", { ref: groupRef, children: children }));
-}
-const RotatorComponent = {
-    name: 'Rotator',
-    Editor: RotatorComponentEditor,
-    View: RotatorView,
-    defaultProperties: {
-        speed: 1.0,
-        axis: 'y'
-    }
-};
-export default RotatorComponent;

package/dist/tools/prefabeditor/hooks/useModelLoader.d.ts

@@ -1,10 +0,0 @@
-import { Object3D } from 'three';
-/**
- * Hook to load a model (GLB/GLTF/FBX) using drei's optimized loaders
- * Returns the loaded model with proper caching and suspense support
- */
-export declare function useModel(filename: string | undefined): Object3D | null;
-/**
- * Preload a model to avoid suspense boundaries during runtime
- */
-export declare function preloadModel(filename: string): void;

package/dist/tools/prefabeditor/hooks/useModelLoader.js

@@ -1,40 +0,0 @@
-import { useGLTF, useFBX } from '@react-three/drei';
-import { useMemo } from 'react';
-/**
- * Hook to load a model (GLB/GLTF/FBX) using drei's optimized loaders
- * Returns the loaded model with proper caching and suspense support
- */
-export function useModel(filename) {
-    const isFBX = filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.fbx');
-    const isGLTF = (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.glb')) || (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.gltf'));
-    // Normalize path (ensure leading slash)
-    const normalizedPath = useMemo(() => {
-        if (!filename)
-            return '';
-        return filename.startsWith('/') ? filename : `/${filename}`;
-    }, [filename]);
-    // Load models using drei hooks (these handle caching automatically)
-    const gltf = useGLTF(isGLTF && normalizedPath ? normalizedPath : '', true);
-    const fbx = useFBX(isFBX && normalizedPath ? normalizedPath : '');
-    // Return the appropriate model
-    if (!filename)
-        return null;
-    if (isGLTF)
-        return gltf.scene;
-    if (isFBX)
-        return fbx;
-    return null;
-}
-/**
- * Preload a model to avoid suspense boundaries during runtime
- */
-export function preloadModel(filename) {
-    const normalizedPath = filename.startsWith('/') ? filename : `/${filename}`;
-    const isFBX = filename.toLowerCase().endsWith('.fbx');
-    if (isFBX) {
-        useFBX.preload(normalizedPath);
-    }
-    else {
-        useGLTF.preload(normalizedPath);
-    }
-}