react-three-game 0.0.94 → 0.0.95

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -240,11 +240,12 @@ function getClickEventName(component) {
     return typeof eventName === 'string' && eventName.trim() ? eventName.trim() : null;
 }
 function analyzeNodeComponents(node) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     let bufferGeometry;
     let geometry;
     let material;
     let model;
+    let sprite;
     const composition = [];
     for (const [key, component] of Object.entries((_a = node.components) !== null && _a !== void 0 ? _a : {})) {
         if (!(component === null || component === void 0 ? void 0 : component.type))
@@ -264,6 +265,9 @@ function analyzeNodeComponents(node) {
             case "Model":
                 model = component;
                 break;
+            case "Sprite":
+                sprite = component;
+                break;
             default: {
                 const def = getComponentDef(component.type);
                 if (!(def === null || def === void 0 ? void 0 : def.View))
@@ -281,7 +285,8 @@ function analyzeNodeComponents(node) {
         geometry: bufferGeometry !== null && bufferGeometry !== void 0 ? bufferGeometry : geometry,
         material,
         model,
-        clickEventName: (_c = (_b = getClickEventName(bufferGeometry)) !== null && _b !== void 0 ? _b : getClickEventName(geometry)) !== null && _c !== void 0 ? _c : getClickEventName(model),
+        sprite,
+        clickEventName: (_d = (_c = (_b = getClickEventName(bufferGeometry)) !== null && _b !== void 0 ? _b : getClickEventName(geometry)) !== null && _c !== void 0 ? _c : getClickEventName(model)) !== null && _d !== void 0 ? _d : getClickEventName(sprite),
         composition,
     };
 }
@@ -471,24 +476,58 @@ function getNodeTransformProps(node) {
 function renderNodeContent(analyzedComponents, loadedModels, primaryClickHandlers, childNodes) {
     var _a, _b, _c, _d;
     const geometry = analyzedComponents.geometry;
-    const geometryDef = analyzedComponents.geometry && getComponentDef(analyzedComponents.geometry.type);
-    const materialDef = analyzedComponents.material && getComponentDef(analyzedComponents.material.type);
-    const modelDef = analyzedComponents.model && getComponentDef(analyzedComponents.model.type);
-    const geometryProperties = (_a = geometry === null || geometry === void 0 ? void 0 : geometry.properties) !== null && _a !== void 0 ? _a : {};
-    const meshVisible = geometryProperties.visible !== false;
-    const meshCastShadow = meshVisible && geometryProperties.castShadow !== false;
-    const meshReceiveShadow = meshVisible && geometryProperties.receiveShadow !== false;
-    let primaryContent = null;
-    if (((_b = analyzedComponents.geometry) === null || _b === void 0 ? void 0 : _b.type) && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
-        primaryContent = (_jsxs("mesh", Object.assign({ visible: meshVisible, castShadow: meshCastShadow, receiveShadow: meshReceiveShadow }, primaryClickHandlers, { children: [_jsx(geometryDef.View, { properties: analyzedComponents.geometry.properties }), analyzedComponents.material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, { properties: analyzedComponents.material.properties }, "material"))] })));
+    const model = analyzedComponents.model;
+    const material = analyzedComponents.material;
+    const sprite = analyzedComponents.sprite;
+    const shapeKind = (sprite === null || sprite === void 0 ? void 0 : sprite.type) ? 'sprite' : (geometry === null || geometry === void 0 ? void 0 : geometry.type) ? 'mesh' : (model === null || model === void 0 ? void 0 : model.type) ? 'model' : 'none';
+    let materialContent = null;
+    switch (shapeKind) {
+        case 'sprite': {
+            const materialDef = (material === null || material === void 0 ? void 0 : material.type) ? getComponentDef(material.type) : undefined;
+            if ((material === null || material === void 0 ? void 0 : material.properties) && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View)) {
+                const materialIsSprite = material.properties.materialType === 'sprite';
+                materialContent = (_jsx(materialDef.View, { properties: Object.assign(Object.assign({}, material.properties), { materialType: 'sprite', transparent: materialIsSprite ? material.properties.transparent : true, depthTest: materialIsSprite ? material.properties.depthTest : false, depthWrite: materialIsSprite ? material.properties.depthWrite : false }) }, "material"));
+            }
+            break;
+        }
+        case 'mesh': {
+            const materialDef = (material === null || material === void 0 ? void 0 : material.type) ? getComponentDef(material.type) : undefined;
+            if ((material === null || material === void 0 ? void 0 : material.properties) && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View)) {
+                materialContent = _jsx(materialDef.View, { properties: material.properties }, "material");
+            }
+            break;
+        }
     }
-    else if (((_c = analyzedComponents.model) === null || _c === void 0 ? void 0 : _c.type)
-        && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View)
-        && !((_d = analyzedComponents.model.properties) === null || _d === void 0 ? void 0 : _d.instanced)
-        && isNodeReady(analyzedComponents.model, loadedModels)) {
-        primaryContent = primaryClickHandlers ? (_jsx("group", Object.assign({}, primaryClickHandlers, { children: _jsx(modelDef.View, { properties: analyzedComponents.model.properties }) }))) : (_jsx(modelDef.View, { properties: analyzedComponents.model.properties }));
+    let primaryContent = null;
+    let contentChildren = childNodes;
+    switch (shapeKind) {
+        case 'sprite': {
+            primaryContent = (_jsxs("sprite", Object.assign({ center: (_b = (_a = sprite === null || sprite === void 0 ? void 0 : sprite.properties) === null || _a === void 0 ? void 0 : _a.center) !== null && _b !== void 0 ? _b : [0.5, 0.5] }, primaryClickHandlers, { children: [materialContent, childNodes] })));
+            contentChildren = null;
+            break;
+        }
+        case 'mesh': {
+            const geometryDef = (geometry === null || geometry === void 0 ? void 0 : geometry.type) ? getComponentDef(geometry.type) : undefined;
+            if (!(geometry === null || geometry === void 0 ? void 0 : geometry.properties) || !(geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View))
+                break;
+            const GeometryView = geometryDef.View;
+            const geometryProperties = (_c = geometry.properties) !== null && _c !== void 0 ? _c : {};
+            const visible = geometryProperties.visible !== false;
+            primaryContent = (_jsxs("mesh", Object.assign({ visible: visible, castShadow: visible && geometryProperties.castShadow !== false, receiveShadow: visible && geometryProperties.receiveShadow !== false }, primaryClickHandlers, { children: [_jsx(GeometryView, { properties: geometry.properties }), materialContent] })));
+            break;
+        }
+        case 'model': {
+            if (!(model === null || model === void 0 ? void 0 : model.type) || ((_d = model.properties) === null || _d === void 0 ? void 0 : _d.instanced) || !isNodeReady(model, loadedModels))
+                break;
+            const modelDef = getComponentDef(model.type);
+            if (!(modelDef === null || modelDef === void 0 ? void 0 : modelDef.View))
+                break;
+            const modelContent = _jsx(modelDef.View, { properties: model.properties });
+            primaryContent = primaryClickHandlers ? _jsx("group", Object.assign({}, primaryClickHandlers, { children: modelContent })) : modelContent;
+            break;
+        }
     }
-    let content = _jsxs(_Fragment, { children: [primaryContent, childNodes] });
+    let content = _jsxs(_Fragment, { children: [primaryContent, contentChildren] });
     for (const { key, View, properties } of analyzedComponents.composition) {
         content = (_jsx(View, { properties: properties, children: content }, key));
     }

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

@@ -1,19 +1,22 @@
 import { type ReactNode } from 'react';
 import type { ThreeElement } from '@react-three/fiber';
 import { Component } from './ComponentRegistry';
-import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
+import { MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial } from 'three/webgpu';
 import { MeshBasicMaterialProperties, MeshStandardMaterialProperties } from 'three';
 declare module '@react-three/fiber' {
     interface ThreeElements {
         meshBasicNodeMaterial: ThreeElement<typeof MeshBasicNodeMaterial>;
         meshStandardNodeMaterial: ThreeElement<typeof MeshStandardNodeMaterial>;
+        spriteNodeMaterial: ThreeElement<typeof SpriteNodeMaterial>;
     }
 }
 export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale'> {
-    materialType?: 'standard' | 'basic';
+    materialType?: 'standard' | 'basic' | 'sprite';
     transmission?: number;
     thickness?: number;
     ior?: number;
+    rotation?: number;
+    sizeAttenuation?: boolean;
     texture?: string;
     offset?: [number, number];
     repeat?: boolean;

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

@@ -15,7 +15,7 @@ import { extend } from '@react-three/fiber';
 import { useFrame } from '@react-three/fiber';
 import { FieldRenderer, Label, NumberInput } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
-import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
+import { MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial } from 'three/webgpu';
 import { TexturePicker } from '../../assetviewer/page';
 import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, LinearSRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
 function Vector2Editor({ label, value, onChange, min, max, step, }) {
@@ -35,6 +35,7 @@ export function MaterialOverridesProvider({ overrides, children, }) {
 extend({
     MeshBasicNodeMaterial,
     MeshStandardNodeMaterial,
+    SpriteNodeMaterial,
 });
 function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     var _a;
@@ -43,6 +44,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     const hasRepeat = component.properties.repeat;
     const animateOffset = component.properties.animateOffset;
     const isStandardMaterial = materialType === 'standard';
+    const isSpriteMaterial = materialType === 'sprite';
     const fields = [
         {
             name: 'materialType',
@@ -51,13 +53,22 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
             options: [
                 { value: 'standard', label: 'Standard' },
                 { value: 'basic', label: 'Basic' },
+                { value: 'sprite', label: 'Sprite' },
             ],
         },
         { name: 'color', type: 'color', label: 'Color' },
         { name: 'toneMapped', type: 'boolean', label: 'Tone Mapped' },
-        { name: 'wireframe', type: 'boolean', label: 'Wireframe' },
+        ...(!isSpriteMaterial ? [
+            { name: 'wireframe', type: 'boolean', label: 'Wireframe' },
+        ] : []),
         { name: 'transparent', type: 'boolean', label: 'Transparent' },
         { name: 'opacity', type: 'number', label: 'Opacity', min: 0, max: 1, step: 0.01 },
+        ...(isSpriteMaterial ? [
+            { name: 'rotation', type: 'number', label: 'Rotation', step: 0.01 },
+            { name: 'sizeAttenuation', type: 'boolean', label: 'Size Attenuation' },
+            { name: 'depthTest', type: 'boolean', label: 'Depth Test' },
+            { name: 'depthWrite', type: 'boolean', label: 'Depth Write' },
+        ] : []),
         ...(isStandardMaterial ? [
             { name: 'metalness', type: 'number', label: 'Metalness', min: 0, max: 1, step: 0.01 },
             { name: 'roughness', type: 'number', label: 'Roughness', min: 0, max: 1, step: 0.01 },
@@ -65,16 +76,16 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
             { name: 'thickness', type: 'number', label: 'Thickness', min: 0, step: 0.1 },
             { name: 'ior', type: 'number', label: 'IOR (Index of Refraction)', min: 1, max: 2.333, step: 0.01 },
         ] : []),
-        {
-            name: 'side',
-            type: 'select',
-            label: 'Side',
-            options: [
-                { value: 'FrontSide', label: 'Front' },
-                { value: 'BackSide', label: 'Back' },
-                { value: 'DoubleSide', label: 'Double' },
-            ],
-        },
+        ...(!isSpriteMaterial ? [{
+                name: 'side',
+                type: 'select',
+                label: 'Side',
+                options: [
+                    { value: 'FrontSide', label: 'Front' },
+                    { value: 'BackSide', label: 'Back' },
+                    { value: 'DoubleSide', label: 'Double' },
+                ],
+            }] : []),
         {
             name: 'texture',
             type: 'custom',
@@ -103,13 +114,13 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     label: 'Speed (X, Y)',
                     render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Speed", value: value, onChange: onChange, step: 0.01 })),
                 }] : []),
-            {
-                name: 'normalMapTexture',
-                type: 'custom',
-                label: 'Normal Map',
-                render: ({ value, onChange }) => (_jsx(TexturePicker, { value: value, onChange: onChange, basePath: basePath })),
-            },
-            ...(component.properties.normalMapTexture ? [{
+            ...(!isSpriteMaterial ? [{
+                    name: 'normalMapTexture',
+                    type: 'custom',
+                    label: 'Normal Map',
+                    render: ({ value, onChange }) => (_jsx(TexturePicker, { value: value, onChange: onChange, basePath: basePath })),
+                }] : []),
+            ...(!isSpriteMaterial && component.properties.normalMapTexture ? [{
                     name: 'normalScale',
                     type: 'custom',
                     label: 'Normal Scale (X, Y)',
@@ -144,7 +155,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
 }
 // View for Material component
 function MaterialComponentView({ properties: rawProps }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const { getTexture } = useAssetRuntime();
     const properties = rawProps;
     const materialType = (_a = properties === null || properties === void 0 ? void 0 : properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
@@ -163,7 +174,7 @@ function MaterialComponentView({ properties: rawProps }) {
     const normalMapTexture = normalMapTextureName ? (_c = getTexture(normalMapTextureName)) !== null && _c !== void 0 ? _c : undefined : undefined;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
     // Destructure all material props and separate custom texture handling props
-    const { texture: _texture, offset: _offset, repeat: _repeat, repeatCount: _repeatCount, animateOffset: _animateOffset, offsetSpeed: _offsetSpeed, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "offset", "repeat", "repeatCount", "animateOffset", "offsetSpeed", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side"]);
+    const { texture: _texture, offset: _offset, repeat: _repeat, repeatCount: _repeatCount, animateOffset: _animateOffset, offsetSpeed: _offsetSpeed, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, rotation, sizeAttenuation, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "offset", "repeat", "repeatCount", "animateOffset", "offsetSpeed", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "rotation", "sizeAttenuation", "side"]);
     const sideMap = { FrontSide, BackSide, DoubleSide };
     const resolvedSide = sideProp ? ((_d = sideMap[sideProp]) !== null && _d !== void 0 ? _d : FrontSide) : FrontSide;
     const minFilterMap = {
@@ -220,14 +231,18 @@ function MaterialComponentView({ properties: rawProps }) {
         return t;
     }, [normalMapTexture]);
     if (!properties) {
-        return _jsx("meshStandardNodeMaterial", { color: "red", wireframe: true });
+        return _jsx("meshStandardNodeMaterial", { attach: "material", color: "red", wireframe: true });
     }
     const overrides = useMaterialOverrides();
     const sharedProps = Object.assign(Object.assign({ map: finalTexture, side: resolvedSide }, materialProps), overrides);
     if (materialType === 'basic') {
-        return _jsx("meshBasicNodeMaterial", Object.assign({}, sharedProps));
+        return _jsx("meshBasicNodeMaterial", Object.assign({ attach: "material" }, sharedProps));
+    }
+    if (materialType === 'sprite') {
+        const spriteTransparent = properties.transparent !== false;
+        return (_jsx("spriteNodeMaterial", Object.assign({ attach: "material", map: finalTexture, color: (_j = properties.color) !== null && _j !== void 0 ? _j : '#ffffff', opacity: (_k = properties.opacity) !== null && _k !== void 0 ? _k : 1, transparent: spriteTransparent, alphaTest: (_l = properties.alphaTest) !== null && _l !== void 0 ? _l : 0, depthTest: (_m = properties.depthTest) !== null && _m !== void 0 ? _m : false, depthWrite: (_o = properties.depthWrite) !== null && _o !== void 0 ? _o : false, toneMapped: (_p = properties.toneMapped) !== null && _p !== void 0 ? _p : true }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true })));
     }
-    return (_jsx("meshStandardNodeMaterial", Object.assign({}, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_j = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _j !== void 0 ? _j : 1, (_k = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _k !== void 0 ? _k : 1] : undefined })));
+    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: "material" }, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_q = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _q !== void 0 ? _q : 1, (_r = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _r !== void 0 ? _r : 1] : undefined })));
 }
 const MaterialComponent = {
     name: 'Material',
@@ -240,6 +255,7 @@ const MaterialComponent = {
         wireframe: false,
         transparent: false,
         opacity: 1,
+        sizeAttenuation: true,
         offset: [0, 0],
         animateOffset: false,
         offsetSpeed: [0, 0],

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

@@ -0,0 +1,8 @@
+import type { Component } from './ComponentRegistry';
+export interface SpriteProps {
+    center?: [number, number];
+    emitClickEvent?: boolean;
+    clickEventName?: string;
+}
+declare const SpriteComponent: Component;
+export default SpriteComponent;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BooleanField, FieldRenderer, NumberInput, StringField } from './Input';
+function Vector2Editor({ value, onChange, min, max, step, }) {
+    var _a, _b;
+    return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 0, onChange: x => { var _a; return onChange([x, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 0]); }, min: min, max: max, step: step, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 0, onChange: y => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 0, y]); }, min: min, max: max, step: step, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }));
+}
+function SpriteComponentEditor({ component, onUpdate, }) {
+    const fields = [
+        {
+            name: 'center',
+            type: 'custom',
+            label: 'Center',
+            render: ({ value, onChange }) => (_jsx(Vector2Editor, { value: value, onChange: onChange, min: 0, max: 1, step: 0.01 })),
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }), _jsxs("div", { style: { marginTop: 8 }, children: [_jsx(BooleanField, { name: "emitClickEvent", label: "Emit Click Event", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitClickEvent ? (_jsx(StringField, { name: "clickEventName", label: "Click Event Name", values: component.properties, onChange: onUpdate, fallback: "node:click" })) : null] })] }));
+}
+const SpriteComponent = {
+    name: 'Sprite',
+    Editor: SpriteComponentEditor,
+    defaultProperties: {
+        center: [0.5, 0.5],
+        emitClickEvent: false,
+        clickEventName: 'node:click',
+    },
+};
+export default SpriteComponent;

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

@@ -1,28 +1,36 @@
-import TransformComponent from './TransformComponent';
-import GeometryComponent from './GeometryComponent';
-import BufferGeometryComponent from './BufferGeometryComponent';
-import ModelComponent from './ModelComponent';
-import TextComponent from './TextComponent';
-import MaterialComponent from './MaterialComponent';
-import SpotLightComponent from './SpotLightComponent';
-import PointLightComponent from './PointLightComponent';
-import DirectionalLightComponent from './DirectionalLightComponent';
-import AmbientLightComponent from './AmbientLightComponent';
-import EnvironmentComponent from './EnvironmentComponent';
-import CameraComponent from './CameraComponent';
-import SoundComponent from './SoundComponent';
-import DataComponent from './DataComponent';
+// biome-ignore assist/source/organizeImports: <in order of display in the editor>
+import TransformComponent from "./TransformComponent";
+import GeometryComponent from "./GeometryComponent";
+import BufferGeometryComponent from "./BufferGeometryComponent";
+import ModelComponent from "./ModelComponent";
+import SpriteComponent from "./SpriteComponent";
+import TextComponent from "./TextComponent";
+import MaterialComponent from "./MaterialComponent";
+import SpotLightComponent from "./SpotLightComponent";
+import PointLightComponent from "./PointLightComponent";
+import DirectionalLightComponent from "./DirectionalLightComponent";
+import AmbientLightComponent from "./AmbientLightComponent";
+import EnvironmentComponent from "./EnvironmentComponent";
+import CameraComponent from "./CameraComponent";
+import SoundComponent from "./SoundComponent";
+import DataComponent from "./DataComponent";
+// this controls the order of components in the editor, and also which components are available to add
 export const builtinComponents = [
     TransformComponent,
+    // geometry components
     GeometryComponent,
     BufferGeometryComponent,
     ModelComponent,
+    SpriteComponent,
     TextComponent,
+    // material components
     MaterialComponent,
+    // light components
     SpotLightComponent,
     PointLightComponent,
     DirectionalLightComponent,
     AmbientLightComponent,
+    // other components
     EnvironmentComponent,
     CameraComponent,
     SoundComponent,

package/package.json

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