react-three-game 0.0.84 → 0.0.85

package/README.md

@@ -113,13 +113,35 @@ That means a saved scene is just a prefab, and the same prefab can be:
 `PrefabRoot` keeps the rendering model narrow and compositional:
 
 * `Transform` is the renderer-owned outer transform
-* `Geometry` + `Material` become the primary mesh content
+* `Geometry` or `BufferGeometry` + `Material` become the primary mesh content
 * non-instanced `Model` becomes the node's primary content
 * `Physics` is a renderer-owned outer wrapper
 * every other component `View` wraps the current subtree
 
 Custom component `View`s use normal React Three Fiber composition with `children`.
 
+For agent-authored custom meshes, use `BufferGeometry` with flat numeric arrays:
+
+```json
+{
+  "id": "triangle",
+  "components": {
+    "bufferGeometry": {
+      "type": "BufferGeometry",
+      "properties": {
+        "positions": [0, 0, 0, 1, 0, 0, 0, 1, 0],
+        "indices": [0, 1, 2],
+        "computeVertexNormals": true
+      }
+    },
+    "material": {
+      "type": "Material",
+      "properties": { "color": "#ff8844" }
+    }
+  }
+}
+```
+
 ## Prefab Format
 
 ```ts

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -292,6 +292,7 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
 }
 function isRendererHandledComponent(componentType) {
     return componentType === "Transform"
+        || componentType === "BufferGeometry"
         || componentType === "Geometry"
         || componentType === "Material"
         || componentType === "Physics"
@@ -387,21 +388,21 @@ function renderCompositionNode(gameObject, ctx, childNodes) {
     return applyNodeComposition(gameObject, _jsxs(_Fragment, { children: [primaryContent, childNodes] }));
 }
 function renderNodePrimaryContent(gameObject, ctx) {
-    var _a, _b;
-    const geometry = findComponent(gameObject, "Geometry");
+    var _a, _b, _c;
+    const geometry = (_a = findComponent(gameObject, "BufferGeometry")) !== null && _a !== void 0 ? _a : 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);
     const modelDef = model && getComponentDef(model.type);
-    const geometryProperties = (_a = geometry === null || geometry === void 0 ? void 0 : geometry.properties) !== null && _a !== void 0 ? _a : {};
+    const geometryProperties = (_b = geometry === null || geometry === void 0 ? void 0 : geometry.properties) !== null && _b !== void 0 ? _b : {};
     const meshVisible = geometryProperties.visible !== false;
     const meshCastShadow = meshVisible && geometryProperties.castShadow !== false;
     const meshReceiveShadow = meshVisible && geometryProperties.receiveShadow !== false;
     if ((geometry === null || geometry === void 0 ? void 0 : geometry.type) && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
         return (_jsxs("mesh", { visible: meshVisible, castShadow: meshCastShadow, receiveShadow: meshReceiveShadow, 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) && !((_b = model.properties) === null || _b === void 0 ? void 0 : _b.instanced) && isNodeReady(gameObject, ctx.loadedModels)) {
+    if ((model === null || model === void 0 ? void 0 : model.type) && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View) && !((_c = model.properties) === null || _c === void 0 ? void 0 : _c.instanced) && isNodeReady(gameObject, ctx.loadedModels)) {
         return _jsx(modelDef.View, { properties: model.properties });
     }
     return null;

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

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

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BooleanField, FieldGroup } from "./Input";
+const DEFAULT_TRIANGLE_POSITIONS = [
+    0, 0, 0,
+    1, 0, 0,
+    0, 1, 0,
+];
+const DEFAULT_TRIANGLE_INDICES = [0, 1, 2];
+const DEFAULT_TRIANGLE_UVS = [
+    0, 0,
+    1, 0,
+    0, 1,
+];
+function isFiniteNumberArray(value) {
+    return Array.isArray(value) && value.every(entry => typeof entry === 'number' && Number.isFinite(entry));
+}
+function normalizeNumberArray(value, fallback) {
+    return isFiniteNumberArray(value) ? value : fallback;
+}
+function toAttributeText(value, fallback) {
+    return JSON.stringify(normalizeNumberArray(value, fallback));
+}
+function parseArrayInput(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed)
+        return [];
+    const parsed = JSON.parse(trimmed);
+    if (!isFiniteNumberArray(parsed)) {
+        throw new Error('Expected a JSON array of numbers');
+    }
+    return parsed;
+}
+function getIndexArray(indices) {
+    if (indices.length === 0)
+        return null;
+    const maxIndex = Math.max(...indices);
+    return maxIndex > 65535 ? new Uint32Array(indices) : new Uint16Array(indices);
+}
+function BufferArrayField({ label, value, fallback, onChange, rows = 4, }) {
+    return (_jsxs("label", { style: { display: 'grid', gap: 4 }, children: [_jsx("span", { style: { fontSize: '10px', color: '#888', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }, children: label }), _jsx("textarea", { rows: rows, spellCheck: false, defaultValue: toAttributeText(value, fallback), onBlur: (event) => {
+                    try {
+                        onChange(parseArrayInput(event.target.value));
+                        event.target.setCustomValidity('');
+                    }
+                    catch (_a) {
+                        event.target.setCustomValidity('Expected a JSON array of numbers');
+                        event.target.reportValidity();
+                    }
+                }, style: {
+                    width: '100%',
+                    backgroundColor: '#171717',
+                    border: '1px solid #333',
+                    padding: '6px 8px',
+                    fontSize: '11px',
+                    color: '#eee',
+                    fontFamily: 'monospace',
+                    outline: 'none',
+                    borderRadius: 3,
+                    resize: 'vertical',
+                    boxSizing: 'border-box',
+                } })] }));
+}
+function BufferGeometryComponentEditor({ component, onUpdate, }) {
+    var _a;
+    const properties = (_a = component.properties) !== null && _a !== void 0 ? _a : {};
+    return (_jsxs(FieldGroup, { children: [_jsx(BufferArrayField, { label: "Positions", value: properties.positions, fallback: DEFAULT_TRIANGLE_POSITIONS, rows: 5, onChange: (positions) => onUpdate({ positions }) }), _jsx(BufferArrayField, { label: "Indices", value: properties.indices, fallback: DEFAULT_TRIANGLE_INDICES, onChange: (indices) => onUpdate({ indices }) }), _jsx(BufferArrayField, { label: "Normals", value: properties.normals, fallback: [], onChange: (normals) => onUpdate({ normals }) }), _jsx(BufferArrayField, { label: "UVs", value: properties.uvs, fallback: DEFAULT_TRIANGLE_UVS, onChange: (uvs) => onUpdate({ uvs }) }), _jsx(BooleanField, { name: "computeVertexNormals", label: "Compute Normals", values: properties, onChange: onUpdate, fallback: true }), _jsx(BooleanField, { name: "visible", label: "Visible", values: properties, onChange: onUpdate, fallback: true }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: properties, onChange: onUpdate, fallback: true }), _jsx(BooleanField, { name: "receiveShadow", label: "Receive Shadow", values: properties, onChange: onUpdate, fallback: true })] }));
+}
+function BufferGeometryComponentView({ properties }) {
+    const positions = normalizeNumberArray(properties.positions, DEFAULT_TRIANGLE_POSITIONS);
+    const indices = normalizeNumberArray(properties.indices, DEFAULT_TRIANGLE_INDICES);
+    const normals = normalizeNumberArray(properties.normals, []);
+    const uvs = normalizeNumberArray(properties.uvs, DEFAULT_TRIANGLE_UVS);
+    const indexArray = getIndexArray(indices);
+    const hasNormals = normals.length >= 3 && normals.length % 3 === 0;
+    const hasUvs = uvs.length >= 2 && uvs.length % 2 === 0;
+    return (_jsxs("bufferGeometry", { onUpdate: (geometry) => {
+            if (properties.computeVertexNormals !== false && !hasNormals) {
+                geometry.computeVertexNormals();
+            }
+            geometry.computeBoundingBox();
+            geometry.computeBoundingSphere();
+        }, children: [_jsx("bufferAttribute", { attach: "attributes-position", args: [new Float32Array(positions), 3] }), indexArray ? (_jsx("bufferAttribute", { attach: "index", args: [indexArray, 1] })) : null, hasNormals ? (_jsx("bufferAttribute", { attach: "attributes-normal", args: [new Float32Array(normals), 3] })) : null, hasUvs ? (_jsx("bufferAttribute", { attach: "attributes-uv", args: [new Float32Array(uvs), 2] })) : null] }));
+}
+const BufferGeometryComponent = {
+    name: 'BufferGeometry',
+    Editor: BufferGeometryComponentEditor,
+    View: BufferGeometryComponentView,
+    defaultProperties: {
+        positions: DEFAULT_TRIANGLE_POSITIONS,
+        indices: DEFAULT_TRIANGLE_INDICES,
+        normals: [],
+        uvs: DEFAULT_TRIANGLE_UVS,
+        computeVertexNormals: true,
+    },
+};
+export default BufferGeometryComponent;

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

@@ -15,8 +15,11 @@ export interface MaterialProps extends Omit<MeshStandardMaterialProperties & Mes
     thickness?: number;
     ior?: number;
     texture?: string;
+    offset?: [number, number];
     repeat?: boolean;
     repeatCount?: [number, number];
+    animateOffset?: boolean;
+    offsetSpeed?: [number, number];
     generateMipmaps?: boolean;
     minFilter?: string;
     magFilter?: string;

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

@@ -9,14 +9,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef } from 'react';
 import { extend } from '@react-three/fiber';
+import { useFrame } from '@react-three/fiber';
 import { FieldRenderer, Label, NumberInput } from './Input';
 import { useAssetRuntime } from '../runtime';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } 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, }) {
+    var _a, _b;
+    return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsxs(Label, { children: [label, " X"] }), _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' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs(Label, { children: [label, " Y"] }), _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' } })] })] }));
+}
 const EMPTY_MATERIAL_OVERRIDES = Object.freeze({});
 const MaterialOverridesContext = createContext(EMPTY_MATERIAL_OVERRIDES);
 export function useMaterialOverrides() {
@@ -36,6 +41,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const hasTexture = !!component.properties.texture;
     const hasRepeat = component.properties.repeat;
+    const animateOffset = component.properties.animateOffset;
     const isStandardMaterial = materialType === 'standard';
     const fields = [
         {
@@ -82,10 +88,20 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     name: 'repeatCount',
                     type: 'custom',
                     label: 'Repeat (X, Y)',
-                    render: ({ value, onChange }) => {
-                        var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "X" }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0.01, max: 100, step: 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "Y" }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0.01, max: 100, step: 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
-                    },
+                    render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Repeat", value: value, onChange: onChange, min: 0.01, max: 100, step: 0.1 })),
+                }] : []),
+            {
+                name: 'offset',
+                type: 'custom',
+                label: 'Offset (X, Y)',
+                render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Offset", value: value, onChange: onChange, step: 0.01 })),
+            },
+            { name: 'animateOffset', type: 'boolean', label: 'Animate Offset' },
+            ...(animateOffset ? [{
+                    name: 'offsetSpeed',
+                    type: 'custom',
+                    label: 'Speed (X, Y)',
+                    render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Speed", value: value, onChange: onChange, step: 0.01 })),
                 }] : []),
             {
                 name: 'normalMapTexture',
@@ -97,10 +113,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     name: 'normalScale',
                     type: 'custom',
                     label: 'Normal Scale (X, Y)',
-                    render: ({ value, onChange }) => {
-                        var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "X" }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0, max: 5, step: 0.01, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "Y" }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0, max: 5, step: 0.01, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
-                    },
+                    render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Normal", value: value, onChange: onChange, min: 0, max: 5, step: 0.01 })),
                 }] : []),
             { name: 'generateMipmaps', type: 'boolean', label: 'Generate Mipmaps' },
             {
@@ -131,13 +144,16 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
 }
 // View for Material component
 function MaterialComponentView({ properties: rawProps }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { getTexture } = useAssetRuntime();
     const properties = rawProps;
     const materialType = (_a = properties === null || properties === void 0 ? void 0 : properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
+    const offset = properties === null || properties === void 0 ? void 0 : properties.offset;
     const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
     const repeatCount = properties === null || properties === void 0 ? void 0 : properties.repeatCount;
+    const animateOffset = properties === null || properties === void 0 ? void 0 : properties.animateOffset;
+    const offsetSpeed = properties === null || properties === void 0 ? void 0 : properties.offsetSpeed;
     const generateMipmaps = (properties === null || properties === void 0 ? void 0 : properties.generateMipmaps) !== false;
     const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
     const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
@@ -147,7 +163,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, repeat: _repeat, repeatCount: _repeatCount, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "repeat", "repeatCount", "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, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "offset", "repeat", "repeatCount", "animateOffset", "offsetSpeed", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side"]);
     const sideMap = { FrontSide, BackSide, DoubleSide };
     const resolvedSide = sideProp ? ((_d = sideMap[sideProp]) !== null && _d !== void 0 ? _d : FrontSide) : FrontSide;
     const minFilterMap = {
@@ -162,8 +178,9 @@ function MaterialComponentView({ properties: rawProps }) {
         NearestFilter,
         LinearFilter
     };
+    const animatedOffsetRef = useRef([(_e = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _e !== void 0 ? _e : 0, (_f = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _f !== void 0 ? _f : 0]);
     const finalTexture = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!texture)
             return undefined;
         const t = texture.clone();
@@ -176,13 +193,24 @@ function MaterialComponentView({ properties: rawProps }) {
             t.wrapS = t.wrapT = ClampToEdgeWrapping;
             t.repeat.set(1, 1);
         }
+        t.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
         t.colorSpace = SRGBColorSpace;
         t.generateMipmaps = generateMipmaps;
-        t.minFilter = (_a = minFilterMap[minFilter]) !== null && _a !== void 0 ? _a : LinearMipmapLinearFilter;
-        t.magFilter = (_b = magFilterMap[magFilter]) !== null && _b !== void 0 ? _b : LinearFilter;
+        t.minFilter = (_c = minFilterMap[minFilter]) !== null && _c !== void 0 ? _c : LinearMipmapLinearFilter;
+        t.magFilter = (_d = magFilterMap[magFilter]) !== null && _d !== void 0 ? _d : LinearFilter;
         t.needsUpdate = true;
         return t;
-    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], generateMipmaps, minFilter, magFilter]);
+    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], offset === null || offset === void 0 ? void 0 : offset[0], offset === null || offset === void 0 ? void 0 : offset[1], generateMipmaps, minFilter, magFilter]);
+    animatedOffsetRef.current = [(_g = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _g !== void 0 ? _g : 0, (_h = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _h !== void 0 ? _h : 0];
+    useFrame((_, delta) => {
+        var _a, _b;
+        if (!finalTexture || !animateOffset)
+            return;
+        const nextX = animatedOffsetRef.current[0] + ((_a = offsetSpeed === null || offsetSpeed === void 0 ? void 0 : offsetSpeed[0]) !== null && _a !== void 0 ? _a : 0) * delta;
+        const nextY = animatedOffsetRef.current[1] + ((_b = offsetSpeed === null || offsetSpeed === void 0 ? void 0 : offsetSpeed[1]) !== null && _b !== void 0 ? _b : 0) * delta;
+        animatedOffsetRef.current = [nextX, nextY];
+        finalTexture.offset.set(nextX, nextY);
+    });
     const finalNormalMap = useMemo(() => {
         if (!normalMapTexture)
             return undefined;
@@ -199,7 +227,7 @@ function MaterialComponentView({ properties: rawProps }) {
     if (materialType === 'basic') {
         return _jsx("meshBasicNodeMaterial", Object.assign({}, sharedProps));
     }
-    return (_jsx("meshStandardNodeMaterial", Object.assign({}, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_e = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _e !== void 0 ? _e : 1, (_f = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _f !== void 0 ? _f : 1] : undefined })));
+    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 })));
 }
 const MaterialComponent = {
     name: 'Material',
@@ -212,6 +240,9 @@ const MaterialComponent = {
         wireframe: false,
         transparent: false,
         opacity: 1,
+        offset: [0, 0],
+        animateOffset: false,
+        offsetSpeed: [0, 0],
         metalness: 0,
         roughness: 1
     },

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

@@ -1,28 +1,30 @@
-import GeometryComponent from './GeometryComponent';
 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 PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
 import PointLightComponent from './PointLightComponent';
 import DirectionalLightComponent from './DirectionalLightComponent';
 import AmbientLightComponent from './AmbientLightComponent';
-import ModelComponent from './ModelComponent';
-import TextComponent from './TextComponent';
 import EnvironmentComponent from './EnvironmentComponent';
 import CameraComponent from './CameraComponent';
 import ClickComponent from './ClickComponent';
 import SoundComponent from './SoundComponent';
 export const builtinComponents = [
-    GeometryComponent,
     TransformComponent,
+    GeometryComponent,
+    BufferGeometryComponent,
+    ModelComponent,
+    TextComponent,
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
     PointLightComponent,
     DirectionalLightComponent,
     AmbientLightComponent,
-    ModelComponent,
-    TextComponent,
     EnvironmentComponent,
     CameraComponent,
     ClickComponent,

package/package.json

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