moeru-ai/airi · warning

Camera or Renderer initialisation failure!

Error message

Camera or Renderer initialisation failure!

What it means

This Tres-based OrbitControls wrapper waits with VueUse until() for both a camera from the Tres context and renderer.domElement. If the wait ends while either is still missing (component torn down, or the refs never become truthy because there is no camera in the context), it warns and skips creating the controls entirely.

Source

Thrown at packages/stage-ui-three/src/components/Controls/OrbitControls.vue:179

          x: camera.value.position.x,
          y: camera.value.position.y,
          z: camera.value.position.z,
        },
        newCameraDistance: controls.value.getDistance(),
      },
    )
  }

  disposeControlsChange?.()
  controls.value?.addEventListener('change', onChange)
  disposeControlsChange = () => controls.value?.removeEventListener('change', onChange)
}

onMounted(async () => {
  // wait until camera is not undefined
  await until(() => cameraTres.value && renderer.domElement).toBeTruthy()
  if (!cameraTres.value || !renderer.domElement) {
    console.warn('Camera or Renderer initialisation failure!')
    return
  }
  // Narrow down the camera's type
  if (!(cameraTres.value instanceof PerspectiveCamera)) {
    console.warn('Camera is not perspective camera, type error!')
    return
  }
  camera.value = cameraTres.value as PerspectiveCamera
  // Obtain orbitControl instance
  controls.value = new OrbitControls(camera.value, renderer.domElement)
  controls.value.enablePan = false
  controls.value.enableZoom = false
  controls.value.enableRotate = false
  // Align to tresjs conventions
  controls.value.mouseButtons = {
    LEFT: MOUSE.ROTATE,
    MIDDLE: MOUSE.DOLLY,
    RIGHT: MOUSE.PAN,

View on GitHub (pinned to 677329427f)

Solutions

1. Ensure the controls are inside the same <TresCanvas> scene graph that owns the camera and renderer
2. Declare a camera in the scene (e.g. <TresPerspectiveCamera />) so the Tres camera context is populated before the controls mount
3. Mount the controls only once the canvas/camera exist (v-if or key on canvas readiness)

// Before mounting OrbitControls, ensure a camera exists in the Tres scene
const camera = useCamera()
const ready = computed(() => Boolean(camera?.camera))
// template: <OrbitControls v-if="ready" />

function hasTresCamera(camera: unknown): camera is { camera: Camera } {
  return Boolean(camera) && typeof camera === 'object' && 'camera' in (camera as object) && (camera as any).camera != null
}

When it happens

Trigger: Using OrbitControls outside a proper <TresCanvas> tree (no camera injected via the Tres camera context), a scene that never declares a camera, or the component being unmounted while the wait is pending so the refs stay undefined.

Common situations: Copy-pasting the controls into a plain three.js scene that is not a Tres context; camera registered after the controls in a way that never populates the context; HMR/unmount races during development.

Related errors

• Camera is not perspective camera, type error!
• Worklet loading failed: ${err}
• AudioContext not initialized
• AudioContext or worklets not ready
• mutexAcquireTimeout must be a positive finite number

AI-assisted analysis of moeru-ai/airi@677329427f (2026-08-18). Data as JSON: /api/errors/62aeaa6fdd121e41. Report an issue: GitHub.