react-three-game 0.0.78 → 0.0.80

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -269,22 +269,33 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
     const isInstanced = (_b = (_a = findComponent(gameObject, "Model")) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.instanced;
     const physicsKey = `physics_${nodeId}_${isInstanced ? 'instanced' : 'standard'}`;
     const renderCtx = { loadedModels, editMode, registerRef };
-    const childNodes = getChildHostComponents(gameObject).length > 0
-        ? _jsx(CompositionChildren, { childIds: childIds, selectedId: selectedId, ctx: renderCtx, parentMatrix: world })
-        : _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode });
+    const childNodes = _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode });
     const inner = (_jsx("group", Object.assign({}, clickHandlers, { children: renderCompositionNode(gameObject, renderCtx, childNodes) })));
     const physicsInner = editMode ? _jsx("group", { visible: false, children: inner }) : inner;
     return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: editMode ? (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: physicsInner }, physicsKey)) : null] })) : hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }, physicsKey)) : (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner })) }));
 }
-function getChildHostComponents(gameObject) {
+function isRendererHandledComponent(componentType) {
+    return componentType === "Transform"
+        || componentType === "Geometry"
+        || componentType === "Material"
+        || componentType === "Physics"
+        || componentType === "Model";
+}
+function getCompositionComponents(gameObject) {
     var _a;
     return Object.entries((_a = gameObject.components) !== null && _a !== void 0 ? _a : {}).reduce((result, [key, comp]) => {
-        if (!(comp === null || comp === void 0 ? void 0 : comp.type))
+        var _a;
+        if (!(comp === null || comp === void 0 ? void 0 : comp.type) || isRendererHandledComponent(comp.type))
             return result;
         const def = getComponentDef(comp.type);
-        if (!(def === null || def === void 0 ? void 0 : def.View) || def.isWrapper)
+        if (!(def === null || def === void 0 ? void 0 : def.View))
             return result;
-        result.push({ key, View: def.View, properties: comp.properties });
+        result.push({
+            key,
+            View: def.View,
+            properties: comp.properties,
+            composition: (_a = def.composition) !== null && _a !== void 0 ? _a : "wrap",
+        });
         return result;
     }, []);
 }
@@ -357,41 +368,31 @@ function getNodeTransformProps(node) {
         scale: (_d = t === null || t === void 0 ? void 0 : t.scale) !== null && _d !== void 0 ? _d : [1, 1, 1],
     };
 }
-function renderCompositionSubtree(gameObject, ctx, isSelected, childIds, parentMatrix = IDENTITY) {
-    if (!gameObject || gameObject.disabled)
-        return null;
-    const transform = getNodeTransformProps(gameObject);
-    const world = parentMatrix.clone().multiply(compose(gameObject));
-    const childNodes = _jsx(CompositionChildren, { childIds: childIds, ctx: ctx, parentMatrix: world });
-    return (_jsx(EntityRuntimeScope, { nodeId: gameObject.id, editMode: ctx.editMode, isSelected: isSelected, children: _jsx("group", { position: transform.position, rotation: transform.rotation, scale: transform.scale, children: renderCompositionNode(gameObject, ctx, childNodes) }, gameObject.id) }));
-}
-function CompositionChildren({ childIds, selectedId, ctx, parentMatrix, }) {
-    return childIds.map(childId => (_jsx(CompositionSubtree, { nodeId: childId, selectedId: selectedId, ctx: ctx, parentMatrix: parentMatrix }, childId)));
-}
-function CompositionSubtree({ nodeId, selectedId, ctx, parentMatrix, }) {
-    const gameObject = usePrefabNode(nodeId);
-    const childIds = usePrefabChildIds(nodeId);
-    const isSelected = selectedId === nodeId;
-    if (!gameObject)
-        return null;
-    return renderCompositionSubtree(gameObject, ctx, isSelected, childIds, parentMatrix);
-}
 function renderCompositionNode(gameObject, ctx, childNodes) {
-    const ownContent = renderNodeOwnContent(gameObject);
-    return wrapWithChildHosts(gameObject, _jsxs(_Fragment, { children: [ownContent, childNodes] }));
+    const primaryContent = renderNodePrimaryContent(gameObject, ctx);
+    return applyNodeComposition(gameObject, _jsxs(_Fragment, { children: [primaryContent, childNodes] }));
 }
-function renderNodeOwnContent(gameObject) {
+function renderNodePrimaryContent(gameObject, ctx) {
+    var _a;
     const geometry = findComponent(gameObject, "Geometry");
     const material = findComponent(gameObject, "Material");
+    const model = findComponent(gameObject, "Model");
     const geometryDef = geometry && getComponentDef(geometry.type);
     const materialDef = material && getComponentDef(material.type);
-    if (!geometry || !(geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View))
-        return null;
-    return (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, { properties: geometry.properties }), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, { properties: material.properties }, "material"))] }));
+    const modelDef = model && getComponentDef(model.type);
+    if ((geometry === null || geometry === void 0 ? void 0 : geometry.type) && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
+        return (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, { properties: geometry.properties }), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, { properties: material.properties }, "material"))] }));
+    }
+    if ((model === null || model === void 0 ? void 0 : model.type) && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View) && !((_a = model.properties) === null || _a === void 0 ? void 0 : _a.instanced) && isNodeReady(gameObject, ctx.loadedModels)) {
+        return _jsx(modelDef.View, { properties: model.properties });
+    }
+    return null;
 }
-function wrapWithChildHosts(gameObject, subtree) {
-    const childHosts = getChildHostComponents(gameObject);
-    return childHosts.reduce((acc, { key, View, properties }) => (_jsx(View, { properties: properties, children: acc }, key)), subtree);
+function applyNodeComposition(gameObject, subtree) {
+    const components = getCompositionComponents(gameObject);
+    return components.reduce((acc, { key, View, properties, composition }) => composition === "sibling"
+        ? (_jsxs(_Fragment, { children: [_jsx(View, { properties: properties }, key), acc] }))
+        : (_jsx(View, { properties: properties, children: acc }, key)), subtree);
 }
 export default PrefabRoot;
 function missingStoreState() {

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PerspectiveCamera, useHelper } from '@react-three/drei';
 import { useRef } from 'react';
 import { CameraHelper } from 'three';
@@ -30,12 +30,13 @@ function CameraComponentView({ properties, children }) {
             cameraRef.current.updateMatrixWorld();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: cameraRef, makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null, children] }));
+    return (_jsxs(PerspectiveCamera, { ref: cameraRef, makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far, children: [editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null, children] }));
 }
 const CameraComponent = {
     name: 'Camera',
     Editor: CameraComponentEditor,
     View: CameraComponentView,
+    composition: 'wrap',
     defaultProperties: cameraDefaults,
 };
 export default CameraComponent;

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

@@ -8,7 +8,7 @@ export type AssetRef = {
 export interface ComponentViewProps<P = Record<string, any>> {
     /** This component's own data from the prefab JSON. */
     properties: P;
-    /** Children to render (for wrapper / child-host components). */
+    /** Children to render for components that wrap the current subtree. */
     children?: React.ReactNode;
     /** Entity local position (passed to wrapper components like Physics). */
     position?: [number, number, number];
@@ -27,8 +27,11 @@ export interface Component {
     }>;
     defaultProperties: any;
     View?: FC<ComponentViewProps>;
-    /** When true, this component wraps child entities (e.g. Physics wraps children in RigidBody). */
-    isWrapper?: boolean;
+    /**
+     * How this component participates in the implicit node composition pipeline.
+        * Defaults to `wrap`; `sibling` renders next to the current subtree.
+     */
+    composition?: "wrap" | "sibling";
     /** Declare which asset paths this component references (for asset loading). */
     getAssetRefs?: (properties: Record<string, any>) => AssetRef[];
 }

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

@@ -84,7 +84,6 @@ const GeometryComponent = {
     name: 'Geometry',
     Editor: GeometryComponentEditor,
     View: GeometryComponentView,
-    isWrapper: true,
     defaultProperties: {
         geometryType: 'box',
         args: getDefaultArgs('box'),

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

@@ -201,7 +201,6 @@ const MaterialComponent = {
     name: 'Material',
     Editor: MaterialComponentEditor,
     View: MaterialComponentView,
-    isWrapper: true,
     defaultProperties: {
         materialType: 'standard',
         color: '#ffffff',

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

@@ -270,7 +270,6 @@ const PhysicsComponent = {
     name: 'Physics',
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
-    isWrapper: true,
     defaultProperties: {
         type: 'dynamic',
         colliders: 'hull',

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

@@ -212,6 +212,7 @@ const SoundComponent = {
     name: 'Sound',
     Editor: SoundComponentEditor,
     View: SoundComponentView,
+    composition: 'sibling',
     defaultProperties: {
         eventName: '',
         clips: [],

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

@@ -48,7 +48,6 @@ function TransformComponentEditor({ component, onUpdate }) {
 const TransformComponent = {
     name: 'Transform',
     Editor: TransformComponentEditor,
-    isWrapper: true,
     defaultProperties: {
         position: [0, 0, 0],
         rotation: [0, 0, 0],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "description": "high performance 3D game engine built in React",
   "main": "dist/index.js",
   "module": "dist/index.js",