minecraft-renderer 0.1.0

package/src/three/world/cursorBlock.ts

@@ -0,0 +1,172 @@
+import * as THREE from 'three'
+import { LineMaterial, LineSegmentsGeometry, Wireframe } from 'three-stdlib'
+import { Vec3 } from 'vec3'
+import { WorldRendererThree } from '../worldRendererThree'
+import { loadThreeJsTextureFromUrl } from '../threeJsUtils'
+import destroyStage0 from '../../assets/destroy_stage_0.png'
+import destroyStage1 from '../../assets/destroy_stage_1.png'
+import destroyStage2 from '../../assets/destroy_stage_2.png'
+import destroyStage3 from '../../assets/destroy_stage_3.png'
+import destroyStage4 from '../../assets/destroy_stage_4.png'
+import destroyStage5 from '../../assets/destroy_stage_5.png'
+import destroyStage6 from '../../assets/destroy_stage_6.png'
+import destroyStage7 from '../../assets/destroy_stage_7.png'
+import destroyStage8 from '../../assets/destroy_stage_8.png'
+import destroyStage9 from '../../assets/destroy_stage_9.png'
+import { BlockShape, BlocksShapes } from '@/playerState/types'
+
+export class CursorBlock {
+  _cursorLinesHidden = false
+  get cursorLinesHidden() {
+    return this._cursorLinesHidden
+  }
+  set cursorLinesHidden(value: boolean) {
+    if (this.interactionLines) {
+      this.interactionLines.mesh.visible = !value
+    }
+    this._cursorLinesHidden = value
+  }
+
+  cursorLineMaterial!: LineMaterial
+  interactionLines: null | { blockPos: Vec3, mesh: THREE.Group, shapePositions: BlocksShapes | undefined } = null
+  prevColor: string | undefined
+  blockBreakMesh: THREE.Mesh
+  breakTextures: THREE.Texture[] = []
+
+  constructor(public readonly worldRenderer: WorldRendererThree) {
+    // Initialize break mesh and textures
+    const destroyStagesImages = [
+      destroyStage0, destroyStage1, destroyStage2, destroyStage3, destroyStage4,
+      destroyStage5, destroyStage6, destroyStage7, destroyStage8, destroyStage9
+    ]
+
+    for (let i = 0; i < 10; i++) {
+      void loadThreeJsTextureFromUrl(destroyStagesImages[i]).then((texture) => {
+        texture.magFilter = THREE.NearestFilter
+        texture.minFilter = THREE.NearestFilter
+        this.breakTextures.push(texture)
+      })
+    }
+
+    const breakMaterial = new THREE.MeshBasicMaterial({
+      transparent: true,
+      blending: THREE.MultiplyBlending,
+      alphaTest: 0.5,
+    })
+    this.blockBreakMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), breakMaterial)
+    this.blockBreakMesh.visible = false
+    this.blockBreakMesh.renderOrder = 999
+    this.blockBreakMesh.name = 'blockBreakMesh'
+    this.worldRenderer.scene.add(this.blockBreakMesh)
+
+    this.worldRenderer.onReactivePlayerStateUpdated('gameMode', () => {
+      this.updateLineMaterial()
+    })
+    // todo figure out why otherwise fog from skybox breaks it
+    setTimeout(() => {
+      this.updateLineMaterial()
+      if (this.interactionLines) {
+        this.setHighlightCursorBlock(this.interactionLines.blockPos, this.interactionLines.shapePositions, true)
+      }
+    })
+  }
+
+  // Update functions
+  updateLineMaterial() {
+    const inCreative = this.worldRenderer.playerStateReactive.gameMode === 'creative'
+    const pixelRatio = this.worldRenderer.renderer.getPixelRatio()
+
+    if (this.cursorLineMaterial) {
+      this.cursorLineMaterial.dispose()
+    }
+    this.cursorLineMaterial = new LineMaterial({
+      color: (() => {
+        switch (this.worldRenderer.worldRendererConfig.highlightBlockColor) {
+          case 'blue':
+            return 0x40_80_ff
+          case 'classic':
+            return 0x00_00_00
+          default:
+            return inCreative ? 0x40_80_ff : 0x00_00_00
+        }
+      })(),
+      linewidth: Math.max(pixelRatio * 0.7, 1) * 2,
+      // dashed: true,
+      // dashSize: 5,
+    })
+    this.prevColor = this.worldRenderer.worldRendererConfig.highlightBlockColor
+  }
+
+  updateBreakAnimation(blockPosition: { x: number, y: number, z: number } | undefined, stage: number | null, mergedShape?: BlockShape) {
+    this.hideBreakAnimation()
+    if (stage === null || !blockPosition || !mergedShape) return
+
+    const { position: _position, width, height, depth } = mergedShape
+    const position = new Vec3(_position.x, _position.y, _position.z)
+    this.blockBreakMesh.scale.set(width * 1.001, height * 1.001, depth * 1.001)
+    position.add(new Vec3(blockPosition.x, blockPosition.y, blockPosition.z))
+    this.blockBreakMesh.position.set(position.x, position.y, position.z)
+    this.blockBreakMesh.visible = true;
+
+    (this.blockBreakMesh.material as THREE.MeshBasicMaterial).map = this.breakTextures[stage] ?? this.breakTextures.at(-1);
+    (this.blockBreakMesh.material as THREE.MeshBasicMaterial).needsUpdate = true
+  }
+
+  hideBreakAnimation() {
+    if (this.blockBreakMesh) {
+      this.blockBreakMesh.visible = false
+    }
+  }
+
+  updateDisplay() {
+    if (this.cursorLineMaterial) {
+      const { renderer } = this.worldRenderer
+      this.cursorLineMaterial.resolution.set(renderer.domElement.width, renderer.domElement.height)
+      this.cursorLineMaterial.dashOffset = performance.now() / 750
+    }
+  }
+
+  setHighlightCursorBlock(blockPos: Vec3 | null, shapePositions?: BlocksShapes, force = false): void {
+    if (blockPos && this.interactionLines && blockPos.equals(this.interactionLines.blockPos) && sameArray(shapePositions ?? [], this.interactionLines.shapePositions ?? []) && !force) {
+      return
+    }
+    if (this.interactionLines !== null) {
+      this.worldRenderer.scene.remove(this.interactionLines.mesh)
+      this.interactionLines = null
+    }
+    if (blockPos === null) {
+      return
+    }
+
+    const group = new THREE.Group()
+    for (const { position: _position, width, height, depth } of shapePositions ?? []) {
+      const position = new Vec3(_position.x, _position.y, _position.z)
+      const scale = [1.0001 * width, 1.0001 * height, 1.0001 * depth] as const
+      const geometry = new THREE.BoxGeometry(...scale)
+      const lines = new LineSegmentsGeometry().fromEdgesGeometry(new THREE.EdgesGeometry(geometry))
+      const wireframe = new Wireframe(lines, this.cursorLineMaterial)
+      const pos = blockPos.plus(position)
+      wireframe.position.set(pos.x, pos.y, pos.z)
+      wireframe.computeLineDistances()
+      group.add(wireframe)
+    }
+    this.worldRenderer.scene.add(group)
+    group.visible = !this.cursorLinesHidden
+    this.interactionLines = { blockPos, mesh: group, shapePositions }
+  }
+
+  render() {
+    if (this.prevColor !== this.worldRenderer.worldRendererConfig.highlightBlockColor) {
+      this.updateLineMaterial()
+    }
+    this.updateDisplay()
+  }
+}
+
+const sameArray = (a: any[], b: any[]) => {
+  if (a.length !== b.length) return false
+  for (const [i, element] of a.entries()) {
+    if (element !== b[i]) return false
+  }
+  return true
+}

package/src/three/world/vr.ts

@@ -0,0 +1,257 @@
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js'
+import { buttonMap as standardButtonsMap } from 'contro-max/build/gamepad'
+import * as THREE from 'three'
+import { WorldRendererThree } from '../worldRendererThree'
+import { DocumentRenderer } from '../documentRenderer'
+
+export async function initVR(worldRenderer: WorldRendererThree, documentRenderer: DocumentRenderer) {
+  if (!('xr' in navigator) || !worldRenderer.worldRendererConfig.vrSupport) return
+  const { renderer } = worldRenderer
+
+  const isSupported = await checkVRSupport()
+  if (!isSupported) return
+
+  enableVr()
+
+  const vrButtonContainer = createVrButtonContainer(renderer)
+  const updateVrButtons = () => {
+    const newHidden = !worldRenderer.worldRendererConfig.vrSupport || !worldRenderer.worldRendererConfig.foreground
+    if (vrButtonContainer.hidden !== newHidden) {
+      vrButtonContainer.hidden = newHidden
+    }
+  }
+
+  worldRenderer.onRender.push(updateVrButtons)
+
+  function enableVr() {
+    renderer.xr.enabled = true
+    // renderer.xr.setReferenceSpaceType('local-floor')
+    worldRenderer.reactiveState.preventEscapeMenu = true
+  }
+
+  function disableVr() {
+    renderer.xr.enabled = false
+    worldRenderer.cameraGroupVr = undefined
+    worldRenderer.reactiveState.preventEscapeMenu = false
+    worldRenderer.scene.remove(user)
+    vrButtonContainer.hidden = true
+  }
+
+  function createVrButtonContainer(renderer) {
+    const container = document.createElement('div')
+    const vrButton = VRButton.createButton(renderer)
+    styleContainer(container)
+
+    const closeButton = createCloseButton(container)
+
+    container.appendChild(vrButton)
+    container.appendChild(closeButton)
+    document.body.appendChild(container)
+
+    return container
+  }
+
+  function styleContainer(container: HTMLElement) {
+    typedAssign(container.style, {
+      position: 'absolute',
+      bottom: '80px',
+      left: '0',
+      right: '0',
+      display: 'flex',
+      justifyContent: 'center',
+      zIndex: '8',
+      gap: '8px',
+    })
+  }
+
+  function createCloseButton(container: HTMLElement) {
+    const closeButton = document.createElement('button')
+    closeButton.textContent = 'X'
+    typedAssign(closeButton.style, {
+      padding: '0 12px',
+      color: 'white',
+      fontSize: '14px',
+      lineHeight: '20px',
+      cursor: 'pointer',
+      background: 'transparent',
+      border: '1px solid rgb(255, 255, 255)',
+      borderRadius: '4px',
+      opacity: '0.7',
+    })
+
+    closeButton.addEventListener('click', () => {
+      container.hidden = true
+      worldRenderer.worldRendererConfig.vrSupport = false
+    })
+
+    return closeButton
+  }
+
+
+  async function checkVRSupport() {
+    try {
+      const supported = await navigator.xr?.isSessionSupported('immersive-vr')
+      return supported && !!XRSession.prototype.updateRenderState
+    } catch (err) {
+      console.error('Error checking if VR is supported', err)
+      return false
+    }
+  }
+
+  // hack for vr camera
+  const user = new THREE.Group()
+  user.name = 'vr-camera-container'
+  worldRenderer.scene.add(user)
+  const controllerModelFactory = new XRControllerModelFactory(new GLTFLoader())
+  const controller1 = renderer.xr.getControllerGrip(0)
+  const controller2 = renderer.xr.getControllerGrip(1)
+
+  // todo the logic written here can be hard to understand as it was designed to work in gamepad api emulation mode, will be refactored once there is a contro-max rewrite is done
+  const virtualGamepadIndex = 4
+  let connectedVirtualGamepad
+  //@ts-expect-error
+  const manageXrInputSource = ({ gamepad, handedness = defaultHandedness }, defaultHandedness, removeAction = false) => {
+    if (handedness === 'right') {
+      const event: any = new Event(removeAction ? 'gamepaddisconnected' : 'gamepadconnected') // todo need to expose and use external gamepads api in contro-max instead
+      event.gamepad = removeAction ? connectedVirtualGamepad : { ...gamepad, mapping: 'standard', index: virtualGamepadIndex }
+      connectedVirtualGamepad = event.gamepad
+      window.dispatchEvent(event)
+    }
+  }
+  let hand1: any = controllerModelFactory.createControllerModel(controller1)
+  controller1.addEventListener('connected', (event) => {
+    hand1.xrInputSource = event.data
+    manageXrInputSource(event.data, 'left')
+    user.add(controller1)
+  })
+  controller1.add(hand1)
+  let hand2: any = controllerModelFactory.createControllerModel(controller2)
+  controller2.addEventListener('connected', (event) => {
+    hand2.xrInputSource = event.data
+    manageXrInputSource(event.data, 'right')
+    user.add(controller2)
+  })
+  controller2.add(hand2)
+
+  controller1.addEventListener('disconnected', () => {
+    // don't handle removal of gamepads for now as is don't affect contro-max
+    manageXrInputSource(hand1.xrInputSource, 'left', true)
+    hand1.xrInputSource = undefined
+  })
+  controller2.addEventListener('disconnected', () => {
+    manageXrInputSource(hand1.xrInputSource, 'right', true)
+    hand2.xrInputSource = undefined
+  })
+
+  const originalGetGamepads = navigator.getGamepads.bind(navigator)
+  // is it okay to patch this?
+  //@ts-expect-error
+  navigator.getGamepads = () => {
+    const originalGamepads = originalGetGamepads()
+    if (!hand1.xrInputSource || !hand2.xrInputSource) return originalGamepads
+    return [
+      ...originalGamepads,
+      {
+        axes: remapAxes(hand2.xrInputSource.gamepad.axes, hand1.xrInputSource.gamepad.axes),
+        buttons: remapButtons(hand2.xrInputSource.gamepad.buttons, hand1.xrInputSource.gamepad.buttons),
+        connected: true,
+        mapping: 'standard',
+        id: '',
+        index: virtualGamepadIndex
+      }
+    ]
+  }
+
+  let rotSnapReset = true
+  let yawOffset = 0
+  renderer.setAnimationLoop(() => {
+    if (!renderer.xr.isPresenting) return
+    if (hand1.xrInputSource && hand2.xrInputSource) {
+      hand1.xAxis = hand1.xrInputSource.gamepad.axes[2]
+      hand1.yAxis = hand1.xrInputSource.gamepad.axes[3]
+      hand2.xAxis = hand2.xrInputSource.gamepad.axes[2]
+      hand2.yAxis = hand2.xrInputSource.gamepad.axes[3]
+      // hand2 should be right
+      if (hand1.xrInputSource.handedness === 'right') {
+        const tmp = hand2
+        hand2 = hand1
+        hand1 = tmp
+      }
+    }
+
+    if (rotSnapReset) {
+      if (Math.abs(hand1.xAxis) > 0.8) {
+        yawOffset -= Math.PI / 4 * Math.sign(hand1.xAxis)
+        rotSnapReset = false
+      }
+    } else if (Math.abs(hand1.xAxis) < 0.1) {
+      rotSnapReset = true
+    }
+
+    // appViewer.backend?.updateCamera(null, yawOffset, 0)
+    // worldRenderer.updateCamera(null, bot.entity.yaw, bot.entity.pitch)
+
+    // todo restore this logic (need to preserve ability to move camera)
+    // const xrCamera = renderer.xr.getCamera()
+    // const d = xrCamera.getWorldDirection(new THREE.Vector3())
+    // bot.entity.yaw = Math.atan2(-d.x, -d.z)
+    // bot.entity.pitch = Math.asin(d.y)
+
+    documentRenderer.frameRender(false)
+  })
+  renderer.xr.addEventListener('sessionstart', () => {
+    user.add(worldRenderer.camera)
+    worldRenderer.cameraGroupVr = user
+  })
+  renderer.xr.addEventListener('sessionend', () => {
+    worldRenderer.cameraGroupVr = undefined
+    user.remove(worldRenderer.camera)
+  })
+
+  worldRenderer.abortController.signal.addEventListener('abort', disableVr)
+}
+
+const xrStandardRightButtonsMap = [
+  [0 /* trigger */, 'Right Trigger'],
+  [1 /* squeeze */, 'Right Bumper'],
+  // need to think of a way to support touchpad input
+  [3 /* Thumbstick Press */, 'Right Stick'],
+  [4 /* A */, 'A'],
+  [5 /* B */, 'B'],
+]
+const xrStandardLeftButtonsMap = [
+  [0 /* trigger */, 'Left Trigger'],
+  [1 /* squeeze */, 'Left Bumper'],
+  // need to think of a way to support touchpad input
+  [3 /* Thumbstick Press */, 'Left Stick'],
+  [4 /* A */, 'X'],
+  [5 /* B */, 'Y'],
+]
+const remapButtons = (rightButtons: any[], leftButtons: any[]) => {
+  // return remapped buttons
+  const remapped = [] as string[]
+  const remapWithMap = (buttons, map) => {
+    for (const [index, standardName] of map) {
+      const standardMappingIndex = standardButtonsMap.findIndex((aliases) => aliases.find(alias => standardName === alias))
+      remapped[standardMappingIndex] = buttons[index]
+    }
+  }
+  remapWithMap(rightButtons, xrStandardRightButtonsMap)
+  remapWithMap(leftButtons, xrStandardLeftButtonsMap)
+  return remapped
+}
+const remapAxes = (axesRight, axesLeft) => {
+  // 0, 1 are reserved for touch
+  return [
+    axesLeft[2],
+    axesLeft[3],
+    axesRight[2],
+    axesRight[3]
+  ]
+}
+
+function typedAssign<T extends Record<string, any>>(target: T, source: Partial<T>) {
+  Object.assign(target, source)
+}

package/src/three/worldGeometryExport.ts

@@ -0,0 +1,259 @@
+import * as THREE from 'three'
+import type { WorldRendererThree } from './worldRendererThree'
+
+const GEOMETRY_EXPORT_GROUP_NAME = 'geometry-export-root'
+
+// Format for exported world geometry
+export interface ExportedWorldGeometry {
+  version: string
+  exportedAt: string
+  camera: {
+    position: { x: number, y: number, z: number }
+    rotation: { pitch: number, yaw: number }
+  }
+  sections: ExportedSection[]
+  textureAtlasDataUrl?: string
+}
+
+export interface ExportedSection {
+  key: string
+  position: { x: number, y: number, z: number }
+  geometry: {
+    positions: number[]
+    normals: number[]
+    colors: number[]
+    uvs: number[]
+    indices: number[]
+  }
+}
+
+/**
+ * Export world geometry to a downloadable file
+ */
+export function exportWorldGeometry(
+  worldRenderer: WorldRendererThree,
+  cameraPosition: { x: number, y: number, z: number },
+  cameraRotation: { pitch: number, yaw: number },
+  includeTexture = false
+): ExportedWorldGeometry {
+  const sections: ExportedSection[] = []
+
+  for (const [key, sectionObject] of Object.entries(worldRenderer.sectionObjects)) {
+    const mesh = sectionObject.children.find(child => child.name === 'mesh') as THREE.Mesh | undefined
+    if (!mesh?.geometry) continue
+
+    const { geometry } = mesh
+    const positionAttr = geometry.getAttribute('position') as THREE.BufferAttribute
+    const normalAttr = geometry.getAttribute('normal') as THREE.BufferAttribute
+    const colorAttr = geometry.getAttribute('color') as THREE.BufferAttribute
+    const uvAttr = geometry.getAttribute('uv') as THREE.BufferAttribute
+    const indexAttr = geometry.index!
+
+    if (!positionAttr || !indexAttr) continue
+
+    sections.push({
+      key,
+      position: {
+        x: mesh.position.x,
+        y: mesh.position.y,
+        z: mesh.position.z
+      },
+      geometry: {
+        positions: [...positionAttr.array],
+        normals: normalAttr ? [...normalAttr.array] : [],
+        colors: colorAttr ? [...colorAttr.array] : [],
+        uvs: uvAttr ? [...uvAttr.array] : [],
+        indices: [...indexAttr.array]
+      }
+    })
+  }
+
+  const exportData: ExportedWorldGeometry = {
+    version: worldRenderer.version ?? 'unknown',
+    exportedAt: new Date().toISOString(),
+    camera: {
+      position: cameraPosition,
+      rotation: cameraRotation
+    },
+    sections
+  }
+
+  // Optionally include texture atlas as data URL
+  if (includeTexture && worldRenderer.material.map) {
+    const canvas = document.createElement('canvas')
+    const texture = worldRenderer.material.map
+    const { image } = texture
+    if (image) {
+      canvas.width = image.width
+      canvas.height = image.height
+      const ctx = canvas.getContext('2d')!
+      ctx.drawImage(image, 0, 0)
+      exportData.textureAtlasDataUrl = canvas.toDataURL('image/png')
+    }
+  }
+
+  return exportData
+}
+
+/**
+ * Download world geometry as JSON file
+ */
+export function downloadWorldGeometry(
+  worldRenderer: WorldRendererThree,
+  cameraPosition: { x: number, y: number, z: number },
+  cameraRotation: { pitch: number, yaw: number },
+  filename = 'world-geometry.json',
+  includeTexture = false
+) {
+  const exportData = exportWorldGeometry(worldRenderer, cameraPosition, cameraRotation, includeTexture)
+  const json = JSON.stringify(exportData)
+  const blob = new Blob([json], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.click()
+
+  URL.revokeObjectURL(url)
+}
+
+/**
+ * Load world geometry from URL
+ */
+export async function loadWorldGeometryFromUrl(url: string): Promise<ExportedWorldGeometry> {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Failed to fetch world geometry: ${response.statusText}`)
+  }
+  return response.json()
+}
+
+/**
+ * Recreate THREE.js meshes from exported geometry
+ * Returns an array of mesh groups that can be added to a scene
+ */
+export function createMeshesFromExport(
+  exportData: ExportedWorldGeometry,
+  material: THREE.Material
+): THREE.Group[] {
+  const groups: THREE.Group[] = []
+
+  for (const section of exportData.sections) {
+    const geometry = new THREE.BufferGeometry()
+
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(section.geometry.positions, 3))
+    if (section.geometry.normals.length) {
+      geometry.setAttribute('normal', new THREE.Float32BufferAttribute(section.geometry.normals, 3))
+    }
+    if (section.geometry.colors.length) {
+      geometry.setAttribute('color', new THREE.Float32BufferAttribute(section.geometry.colors, 3))
+    }
+    if (section.geometry.uvs.length) {
+      geometry.setAttribute('uv', new THREE.Float32BufferAttribute(section.geometry.uvs, 2))
+    }
+
+    // Use appropriate index type based on vertex count
+    const maxIndex = Math.max(...section.geometry.indices)
+    const IndexArrayType = maxIndex > 65_535 ? Uint32Array : Uint16Array
+    geometry.setIndex(new THREE.BufferAttribute(new IndexArrayType(section.geometry.indices), 1))
+
+    const mesh = new THREE.Mesh(geometry, material)
+    mesh.position.set(section.position.x, section.position.y, section.position.z)
+    mesh.name = 'mesh'
+
+    const group = new THREE.Group()
+    group.name = 'chunk'
+    group.add(mesh)
+
+    groups.push(group)
+  }
+
+  return groups
+}
+
+/**
+ * Load texture from data URL and create THREE.js texture
+ */
+export async function loadTextureFromDataUrl(dataUrl: string): Promise<THREE.Texture> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => {
+      const texture = new THREE.Texture(image)
+      texture.magFilter = THREE.NearestFilter
+      texture.minFilter = THREE.NearestFilter
+      texture.needsUpdate = true
+      texture.flipY = false
+      resolve(texture)
+    }
+    image.onerror = reject
+    image.src = dataUrl
+  })
+}
+
+const disposeGeometryExportGroup = (group: THREE.Object3D) => {
+  group.traverse(obj => {
+    if ((obj as THREE.Mesh).isMesh) {
+      const mesh = obj as THREE.Mesh
+      mesh.geometry?.dispose()
+    }
+  })
+
+  const material = group.userData?.geometryExportMaterial as THREE.Material | undefined
+  if (material) {
+    const texture = (material as THREE.MeshLambertMaterial).map
+    texture?.dispose?.()
+    material.dispose?.()
+  }
+}
+
+/**
+ * Apply exported geometry to an existing WorldRenderer instance.
+ * Replaces any previously imported geometry export group.
+ */
+export async function applyWorldGeometryExport(
+  worldRenderer: WorldRendererThree,
+  exportData: ExportedWorldGeometry
+): Promise<number> {
+  const {
+    scene,
+    renderUpdateEmitter,
+    material: rendererMaterial
+  } = worldRenderer
+  const existingGroup = scene.getObjectByName(GEOMETRY_EXPORT_GROUP_NAME)
+  if (existingGroup) {
+    scene.remove(existingGroup)
+    disposeGeometryExportGroup(existingGroup)
+  }
+
+  const hasEmbeddedTexture = !!exportData.textureAtlasDataUrl
+  let material: THREE.Material
+  if (hasEmbeddedTexture && exportData.textureAtlasDataUrl) {
+    const texture = await loadTextureFromDataUrl(exportData.textureAtlasDataUrl)
+    material = new THREE.MeshLambertMaterial({
+      map: texture,
+      vertexColors: true,
+      transparent: true,
+      alphaTest: 0.1
+    })
+    material.name = 'geometry-export-material'
+  } else {
+    material = rendererMaterial
+  }
+
+  const groups = createMeshesFromExport(exportData, material)
+  const container = new THREE.Group()
+  container.name = GEOMETRY_EXPORT_GROUP_NAME
+  if (hasEmbeddedTexture) {
+    container.userData.geometryExportMaterial = material
+  }
+
+  for (const group of groups) {
+    container.add(group)
+  }
+
+  scene.add(container)
+  renderUpdateEmitter.emit('update')
+
+  return groups.length
+}