HexaField · HexaField · Aug 30, 2025 · Sep 3, 2025 · Sep 3, 2025 · Sep 3, 2025
diff --git a/.gitignore b/.gitignore
@@ -115,4 +115,5 @@ public/projects/*
 
 public/data/*
 
-storage/
+storage/
+yarn.lock
diff --git a/flux/.gitignore b/flux/.gitignore
@@ -0,0 +1,21 @@
+node_modules
+dist
+package-lock.json
+
+# Log files
+*.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.turbo
+dev-dist
+vite.config.ts.timestamp*
+
+cachedb
+yarn.lock
diff --git a/flux/README b/flux/README
@@ -0,0 +1,17 @@
+# Create Flux Plugin
+
+Bootstrap a new [Flux](https://fluxsocial.io) plugin for your community.
+
+[Documentation](https://docs.fluxsocial.io/create-flux-plugin/getting-started/introduction.html)
+
+Install deps and start building:
+
+```bash [npm]
+cd [plugin-name]
+npm install
+npm run dev
+```
+
+## Prerequisites
+
+Flux runs on top of [AD4M](https://ad4m.dev), a p2p framework where all data is stored and shared. In order to build a new Flux app you need to [download](https://ad4m.dev/download) and install AD4M.
diff --git a/flux/globals.d.ts b/flux/globals.d.ts
@@ -0,0 +1 @@
+declare module "*.module.css";
diff --git a/flux/index.html b/flux/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html class="dark" lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flux App</title>
+    <style>
+      html {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        font-family: Arial, Helvetica, sans-serif;
+        color: var(--j-color-ui-800);
+        background: var(--j-color-white);
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+      flux-app {
+        height: 100%;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <flux-container>
+      <flux-plugin></flux-plugin>
+    </flux-container>
+
+    <script type="module">
+      import Plugin from "./src/main.ts";
+      import "@coasys/flux-container";
+
+      customElements.define("flux-plugin", Plugin);
+    </script>
+  </body>
+</html>
diff --git a/flux/package.json b/flux/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@conjureworld/flux-plugin",
+  "version": "0.0.1",
+  "fluxapp": {
+    "name": "Conjure",
+    "description": "Immersive Collaboration",
+    "icon": "conjure"
+  },
+  "keywords": [
+    "flux-plugin",
+    "ad4m-view"
+  ],
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/main.umd.cjs",
+  "module": "./dist/main.js",
+  "exports": {
+    ".": {
+      "import": "./dist/main.js",
+      "require": "./dist/main.umd.cjs"
+    }
+  },
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "overrides": {
+    "@coasys/ad4m": "0.10.1-release-candidate-4",
+    "@coasys/ad4m-react-hooks": "0.10.1-release-candidate-4",
+    "@coasys/flux-api": "0.10.1-rc4"
+  },
+  "dependencies": {
+    "@coasys/ad4m": "0.10.1-release-candidate-4",
+    "@coasys/ad4m-react-hooks": "0.10.1-release-candidate-4",
+    "@coasys/flux-api": "0.10.1-rc4"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
+    "@babel/plugin-transform-private-methods": "^7.27.1",
+    "@coasys/flux-container": "0.10.1-rc4",
+    "@vitejs/plugin-react-swc": "^4.0.1",
+    "vite-plugin-babel": "1.3.2",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  }
+}
diff --git a/flux/src/App.tsx b/flux/src/App.tsx
@@ -0,0 +1,125 @@
+// tslint:disable:ordered-imports
+
+import '@ir-engine/engine'
+
+import { startTimer } from '@ir-engine/spatial/src/startTimer'
+
+import { PerspectiveProxy } from '@coasys/ad4m'
+import { AgentClient } from '@coasys/ad4m/lib/src/agent/AgentClient'
+import {
+  createEngine,
+  EngineState,
+  EntityID,
+  getComponent,
+  setComponent,
+  SourceID,
+  UUIDComponent
+} from '@ir-engine/ecs'
+import { dispatchAction, getMutableState, getState, useMutableState, type UserID } from '@ir-engine/hyperflux'
+import { ReferenceSpaceState, TransformComponent } from '@ir-engine/spatial'
+import { useSpatialEngine } from '@ir-engine/spatial/src/initializeEngine'
+import { useEngineCanvas } from '@ir-engine/spatial/src/renderer/functions/useEngineCanvas'
+import React, { useEffect, useRef, useState } from 'react'
+import { SceneState } from '@ir-engine/engine/src/gltf/GLTFState'
+import { LocationState } from '@ir-engine/client-core/src/social/services/LocationService'
+import { SpectateActions } from '@ir-engine/spatial/src/camera/systems/SpectateSystem'
+
+import { useTestScene } from '../../src/world/TestScene'
+import { CameraOrbitComponent } from '@ir-engine/spatial/src/camera/components/CameraOrbitComponent'
+import { InputComponent } from '@ir-engine/spatial/src/input/components/InputComponent'
+import { Box3, Vector3 } from 'three'
+// import { useBasicScene } from '../../src/world/BasicScene'
+// import { useSpawnAvatar } from '../../src/world/useSpawnAvatar'
+
+createEngine()
+startTimer()
+
+type Props = {
+  agent: AgentClient
+  perspective: PerspectiveProxy
+  source: string
+}
+
+const Scene = (props: { url: string }) => {
+  useTestScene(props.url)
+  // useBasicScene(props.url)
+  // useSpawnAvatar(props.url)
+  useEffect(() => {
+    const viewer = getState(ReferenceSpaceState).viewerEntity
+    setComponent(viewer, CameraOrbitComponent)
+    setComponent(viewer, InputComponent)
+
+    const transform = getComponent(viewer, TransformComponent)
+    transform.rotation.setFromAxisAngle(new Vector3(0, 1, 0), -Math.PI / 2)
+
+    CameraOrbitComponent.setFocus(
+      viewer,
+      new Vector3(0, 1.5, 0),
+      new Box3().setFromCenterAndSize(new Vector3(0, 1.5, 0), new Vector3(3, 3, 3))
+    )
+
+    const sceneURL = `${props.url}.gltf`
+    getMutableState(LocationState).currentLocation.location.sceneURL.set(sceneURL)
+    return () => {
+      getMutableState(LocationState).currentLocation.location.sceneURL.set('')
+    }
+  }, [])
+  return null
+}
+
+const Engine = (props: Props) => {
+  const ref = useRef(null)
+
+  useSpatialEngine()
+  useEngineCanvas(ref.current)
+
+  const viewerEntity = useMutableState(ReferenceSpaceState).viewerEntity.value
+
+  return (
+    <>
+      <div ref={ref} style={{ width: '100%', height: '100%', position: 'absolute' }} />
+      {viewerEntity && <Scene url={props.perspective.sharedUrl!} />}
+    </>
+  )
+}
+
+export default function App({ agent, perspective, source }: Props) {
+  if (!perspective?.uuid || !agent) return <div>"No perspective or agent client"</div>
+
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    if (!agent) return
+    agent.me().then((me) => {
+      setReady(true)
+      getMutableState(EngineState).userID.set(me.did as UserID)
+    })
+  }, [])
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden'
+      }}
+    >
+      {ready && <Engine agent={agent} perspective={perspective} source={source} />}
+      <canvas
+        id="engine-renderer-canvas"
+        style={{
+          outline: 'none',
+          zIndex: 0,
+          width: '100%',
+          height: '100%',
+          position: 'fixed',
+          WebkitUserSelect: 'none',
+          pointerEvents: 'auto',
+          userSelect: 'none'
+        }}
+      />
+    </div>
+  )
+}
diff --git a/flux/src/main.ts b/flux/src/main.ts
@@ -0,0 +1,12 @@
+import '@hookstate/core'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import App from './App'
+import { reactToWebComponent } from './reactToWebComponent'
+
+const CustomElement = reactToWebComponent(App, React, ReactDOM, {
+  shadow: false,
+  observedProps: ['perspective', 'agent', 'source']
+})
+
+export default CustomElement