Dynamic Components

Example


import { RemoteComponent } from '@amaspace-editor/editor-3d'
 
const MyScene = () => {
  return (
    <canvas>
      <RemoteComponent />
      <mesh>
        <meshBasicMaterial color={0xff0000} />
        <boxGeometry args={[1, 1, 1]} />
      </mesh>
 
      <React.Suspense fallback={null}>
        <RemoteComponent color={color} url='https://cdn.somewebsite.com/some-component.js'/>
      </React.Suspense>
    </canvas>
  )
}

Remote Component Example (some-component.js):


import React from 'react'
 
const Component = ({ color }) => {
  return (
    <mesh>
      <meshStandardMaterial color={color} />
      <boxGeometry args={[1, 1, 1]} />
    </mesh>
  )
}
 
export default Component

Supported Dependencies:


React, animejs, @react-three/fiber, @react-three/drei, three, three-stdlib

🔄 Dynamic Component Hooks


import { useDynamicComponent, useDynamicComponents } from '@amaspace-editor/editor-3d'
 
const resultComponentsArray = useDynamicComponent('comp.js');
const ResultComponent = useDynamicComponents(['comp1.js', 'comp2.js']);