Examples

This section provides practical examples of how to build and integrate custom systems using the Nexus Engine SDK.

Basic 3D System (Orbiting Cube)

Here's an example of a simple 3D system that renders a spinning cube in the scene.

import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { Mesh } from 'three';

export default function RotatingCubeSystem(props: any) {
  const meshRef = useRef<Mesh>(null);

  useFrame((state, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.x += delta * (props.speed || 1);
      meshRef.current.rotation.y += delta * (props.speed || 1);
    }
  });

  return (
    <mesh ref={meshRef} position={props.position} scale={props.scale}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={props.color || "hotpink"} />
    </mesh>
  );
}

UI Overlay System (Health Bar)

Systems do not have to be 3D. They can render standard DOM elements over the canvas by setting is3D: false.

import React, { useEffect, useState } from 'react';
import { engineEventBus, EventTypes } from '@neural-workspace/nexus-engine-core';

export default function HealthOverlaySystem(props: any) {
  const [health, setHealth] = useState(100);

  useEffect(() => {
    // Listen for damage events across the engine
    const unsubscribe = engineEventBus.subscribe('PLAYER_DAMAGED', (payload: any) => {
      setHealth(prev => Math.max(0, prev - payload.amount));
    });
    
    return () => unsubscribe();
  }, []);

  return (
    <div style={{ position: 'absolute', top: 20, left: 20, zIndex: 1000, color: 'white' }}>
      <h2>Player Health: {health}%</h2>
      <div style={{ width: '200px', height: '20px', background: '#333' }}>
        <div style={{ width: `${health}%`, height: '100%', background: 'red', transition: 'width 0.2s' }} />
      </div>
    </div>
  );
}

Injecting the Systems

Once your systems are registered, you can inject them via the engine configuration:

import React from 'react';
import { NexusEngine } from '@neural-workspace/nexus-engine-core';

export default function App() {
  return (
    <NexusEngine 
      apiKey="your-api-key"
      config={{
        nodes: [
          { type: 'ambientLight', properties: { intensity: 0.5 } },
          { type: 'pointLight', position: [10, 10, 10], properties: { intensity: 1 } }
        ],
        systems: [
          { type: 'RotatingCubeSystem', is3D: true, position: [0, 0, 0], config: { color: 'cyan', speed: 2 } },
          { type: 'HealthOverlaySystem', is3D: false }
        ]
      }}
    />
  );
}