Entities can be selected and translated again.

web/src/main/kotlin/world/phantasmal/web/core/rendering/Renderer.kt

@@ -4,7 +4,7 @@ import kotlinx.browser.window
 import mu.KotlinLogging
 import org.w3c.dom.HTMLCanvasElement
 import world.phantasmal.core.disposable.Disposable
-import world.phantasmal.web.core.minus
+import world.phantasmal.core.disposable.disposable
 import world.phantasmal.web.externals.three.*
 import world.phantasmal.webui.DisposableContainer
 import world.phantasmal.webui.obj
@@ -24,6 +24,8 @@ abstract class Renderer(
     val camera: Camera,
 ) : DisposableContainer() {
     private val threeRenderer: ThreeRenderer = addDisposable(createThreeRenderer()).renderer
+    private var width = 0.0
+    private var height = 0.0
     private val light = HemisphereLight(
         skyColor = 0xffffff,
         groundColor = 0x505050,
@@ -46,14 +48,19 @@ abstract class Renderer(
             add(lightHolder)
         }
 
-    val controls: OrbitControls =
+    lateinit var controls: OrbitControls
-        OrbitControls(camera, canvas).apply {
+
+    open fun initializeControls() {
+        controls = OrbitControls(camera, canvas).apply {
             mouseButtons = obj {
                 LEFT = MOUSE.PAN
                 MIDDLE = MOUSE.DOLLY
                 RIGHT = MOUSE.ROTATE
             }
+
+            addDisposable(disposable { dispose() })
         }
+    }
 
     fun startRendering() {
         logger.trace { "${this::class.simpleName} - start rendering." }
@@ -72,6 +79,8 @@ abstract class Renderer(
     }
 
     open fun setSize(width: Double, height: Double) {
+        this.width = width
+        this.height = height
         canvas.width = floor(width).toInt()
         canvas.height = floor(height).toInt()
         threeRenderer.setSize(width, height)
@@ -90,9 +99,13 @@ abstract class Renderer(
         controls.update()
     }
 
+    fun pointerPosToDeviceCoords(pos: Vector2) {
+        pos.set((pos.x / width) * 2 - 1, (pos.y / height) * -2 + 1)
+    }
+
     protected open fun render() {
         if (camera is PerspectiveCamera) {
-            val distance = (controls.target - camera.position).length()
+            val distance = camera.position.distanceTo(controls.target)
             camera.near = distance / 100
             camera.far = max(2_000.0, 10 * distance)
             camera.updateProjectionMatrix()

web/src/main/kotlin/world/phantasmal/web/externals/three/OrbitControls.kt

@@ -20,4 +20,10 @@ external class OrbitControls(`object`: Camera, domElement: HTMLElement = defined
     var mouseButtons: OrbitControlsMouseButtons
 
     fun update(): Boolean
+
+    fun saveState()
+
+    fun reset()
+
+    fun dispose()
 }

web/src/main/kotlin/world/phantasmal/web/externals/three/three.kt

@@ -88,6 +88,8 @@ external class Vector3(
      */
     fun cross(v: Vector3): Vector3
 
+    fun distanceTo(v: Vector3): Double
+
     fun applyEuler(euler: Euler): Vector3
     fun applyMatrix3(m: Matrix3): Vector3
     fun applyNormalMatrix(m: Matrix3): Vector3
@@ -139,6 +141,21 @@ external class Matrix4 {
     fun premultiply(m: Matrix4): Matrix4
 }
 
+external class Ray(origin: Vector3 = definedExternally, direction: Vector3 = definedExternally) {
+    var origin: Vector3
+    var direction: Vector3
+
+    fun intersectPlane(plane: Plane, target: Vector3): Vector3?
+}
+
+external class Face3 {
+    var normal: Vector3
+}
+
+external class Plane(normal: Vector3 = definedExternally, constant: Double = definedExternally) {
+    fun set(normal: Vector3, constant: Double): Plane
+}
+
 open external class EventDispatcher
 
 external interface Renderer {
@@ -202,6 +219,8 @@ open external class Object3D {
      */
     var matrix: Matrix4
 
+    var visible: Boolean
+
     /**
      * An object that can be used to store custom data about the Object3d. It should not hold references to functions as these will not be cloned.
      */
@@ -589,12 +608,22 @@ external class Raycaster(
     near: Double = definedExternally,
     far: Double = definedExternally,
 ) {
+    var ray: Ray
+
+    fun set(origin: Vector3, direction: Vector3)
+
     /**
      * Updates the ray with a new origin and direction.
      * @param coords 2D coordinates of the mouse, in normalized device coordinates (NDC)---X and Y components should be between -1 and 1.
      * @param camera camera from which the ray should originate
      */
     fun setFromCamera(coords: Vector2, camera: Camera)
+
+    fun intersectObject(
+        `object`: Object3D,
+        recursive: Boolean = definedExternally,
+        optionalTarget: Array<Intersection> = definedExternally,
+    ): Array<Intersection>
 }
 
 external interface Intersection {
@@ -602,6 +631,8 @@ external interface Intersection {
     var distanceToRay: Double?
     var point: Vector3
     var index: Double?
+    var face: Face3?
+    var faceIndex: Int?
     var `object`: Object3D
     var uv: Vector2?
     var instanceId: Int?

web/src/main/kotlin/world/phantasmal/web/questEditor/QuestEditor.kt

@@ -50,7 +50,6 @@ class QuestEditor(
         val assemblyEditorController = addDisposable(AssemblyEditorController(assemblyEditorStore))
 
         // Rendering
-        // Renderer
         val renderer = addDisposable(QuestRenderer(createThreeRenderer))
         addDisposables(
             QuestEditorMeshManager(

web/src/main/kotlin/world/phantasmal/web/questEditor/loading/AreaAssetLoader.kt

@@ -19,7 +19,6 @@ import world.phantasmal.web.externals.three.Group
 import world.phantasmal.web.externals.three.Object3D
 import world.phantasmal.web.questEditor.models.AreaVariantModel
 import world.phantasmal.web.questEditor.models.SectionModel
-import world.phantasmal.web.questEditor.rendering.CollisionUserData
 import world.phantasmal.webui.DisposableContainer
 
 /**
@@ -274,9 +273,7 @@ private fun areaCollisionGeometryToTransformNode(
         }
 
         if (builder.vertexCount > 0) {
-            val mesh = builder.buildMesh(boundingVolumes = true)
+            obj3d.add(builder.buildMesh(boundingVolumes = true))
-            (mesh.userData.unsafeCast<CollisionUserData>()).collisionMesh = true
-            obj3d.add(mesh)
         }
     }
 

web/src/main/kotlin/world/phantasmal/web/questEditor/loading/LoadingCache.kt

@@ -6,6 +6,7 @@ import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.async
 import world.phantasmal.core.disposable.TrackedDisposable
 
+@OptIn(ExperimentalCoroutinesApi::class)
 class LoadingCache<K, V>(
     private val scope: CoroutineScope,
     private val loadValue: suspend (K) -> V,
@@ -13,10 +14,14 @@ class LoadingCache<K, V>(
 ) : TrackedDisposable() {
     private val map = mutableMapOf<K, Deferred<V>>()
 
+    val values: Collection<Deferred<V>> = map.values
+
     suspend fun get(key: K): V =
         map.getOrPut(key) { scope.async { loadValue(key) } }.await()
 
-    @OptIn(ExperimentalCoroutinesApi::class)
+    fun getIfPresentNow(key: K): V? =
+        map[key]?.takeIf { it.isCompleted }?.getCompleted()
+
     override fun internalDispose() {
         map.values.forEach {
             if (it.isActive) {

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/AreaMeshManager.kt

@@ -12,7 +12,7 @@ class AreaMeshManager(
     private val areaAssetLoader: AreaAssetLoader,
 ) {
     suspend fun load(episode: Episode?, areaVariant: AreaVariantModel?) {
-        renderer.collisionGeometry = null
+        renderer.clearCollisionGeometry()
 
         if (episode == null || areaVariant == null) {
             return

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/EntityInstance.kt

@@ -0,0 +1,71 @@
+package world.phantasmal.web.questEditor.rendering
+
+import world.phantasmal.observable.value.Val
+import world.phantasmal.web.externals.three.InstancedMesh
+import world.phantasmal.web.externals.three.Object3D
+import world.phantasmal.web.questEditor.models.QuestEntityModel
+import world.phantasmal.web.questEditor.models.QuestNpcModel
+import world.phantasmal.web.questEditor.models.QuestObjectModel
+import world.phantasmal.web.questEditor.models.WaveModel
+import world.phantasmal.webui.DisposableContainer
+
+class EntityInstance(
+    val entity: QuestEntityModel<*, *>,
+    val mesh: InstancedMesh,
+    var instanceIndex: Int,
+    selectedWave: Val<WaveModel?>,
+    modelChanged: (instanceIndex: Int) -> Unit,
+) : DisposableContainer() {
+    init {
+        updateMatrix()
+
+        addDisposables(
+            entity.worldPosition.observe { updateMatrix() },
+            entity.worldRotation.observe { updateMatrix() },
+        )
+
+        val isVisible: Val<Boolean>
+
+        if (entity is QuestNpcModel) {
+            isVisible =
+                entity.sectionInitialized.map(
+                    selectedWave,
+                    entity.wave
+                ) { sectionInitialized, sWave, entityWave ->
+                    sectionInitialized && (sWave == null || sWave == entityWave)
+                }
+        } else {
+            isVisible = entity.section.isNotNull()
+
+            if (entity is QuestObjectModel) {
+                addDisposable(entity.model.observe(callNow = false) {
+                    modelChanged(instanceIndex)
+                })
+            }
+        }
+
+//            observe(isVisible) { visible ->
+//                mesh.setEnabled(visible)
+//            }
+    }
+
+    private fun updateMatrix() {
+        instanceHelper.position.set(
+            entity.worldPosition.value.x,
+            entity.worldPosition.value.y,
+            entity.worldPosition.value.z,
+        )
+        instanceHelper.rotation.set(
+            entity.worldRotation.value.x,
+            entity.worldRotation.value.y,
+            entity.worldRotation.value.z,
+        )
+        instanceHelper.updateMatrix()
+        mesh.setMatrixAt(instanceIndex, instanceHelper.matrix)
+        mesh.instanceMatrix.needsUpdate = true
+    }
+
+    companion object {
+        private val instanceHelper = Object3D()
+    }
+}

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/EntityInstancedMesh.kt

@@ -0,0 +1,73 @@
+package world.phantasmal.web.questEditor.rendering
+
+import world.phantasmal.observable.value.Val
+import world.phantasmal.web.externals.three.InstancedMesh
+import world.phantasmal.web.questEditor.models.QuestEntityModel
+import world.phantasmal.web.questEditor.models.WaveModel
+
+/**
+ * Represents a specific entity type and model combination. Contains a single [InstancedMesh] and
+ * manages its instances.
+ */
+class EntityInstancedMesh(
+    private val mesh: InstancedMesh,
+    private val selectedWave: Val<WaveModel?>,
+    /**
+     * Called whenever an entity's model changes. At this point the entity's instance has already
+     * been removed from this [EntityInstancedMesh]. The entity should then be added to the correct
+     * [EntityInstancedMesh].
+     */
+    private val modelChanged: (QuestEntityModel<*, *>) -> Unit,
+) {
+    private val instances: MutableList<EntityInstance> = mutableListOf()
+
+    init {
+        mesh.userData = this
+    }
+
+    fun getInstanceAt(instanceIndex: Int): EntityInstance =
+        instances[instanceIndex]
+
+    fun addInstance(entity: QuestEntityModel<*, *>) {
+        val instanceIndex = mesh.count
+        mesh.count++
+
+        instances.add(
+            EntityInstance(
+                entity,
+                mesh,
+                instanceIndex,
+                selectedWave
+            ) { index ->
+                removeAt(index)
+                modelChanged(entity)
+            }
+        )
+    }
+
+    fun removeInstance(entity: QuestEntityModel<*, *>) {
+        val index = instances.indexOfFirst { it.entity == entity }
+
+        if (index != -1) {
+            removeAt(index)
+        }
+    }
+
+    private fun removeAt(index: Int) {
+        val instance = instances.removeAt(index)
+        instance.mesh.count--
+
+        for (i in index until instance.mesh.count) {
+            instance.mesh.instanceMatrix.copyAt(i, instance.mesh.instanceMatrix, i + 1)
+            instances[i].instanceIndex = i
+        }
+
+        instance.dispose()
+    }
+
+    fun clearInstances() {
+        instances.forEach { it.dispose() }
+        instances.clear()
+        mesh.count = 0
+    }
+}

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/EntityMeshManager.kt

@@ -1,20 +1,13 @@
 package world.phantasmal.web.questEditor.rendering
 
-import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.*
-import kotlinx.coroutines.launch
 import mu.KotlinLogging
 import world.phantasmal.lib.fileFormats.quest.EntityType
-import world.phantasmal.observable.value.Val
-import world.phantasmal.web.externals.three.Group
-import world.phantasmal.web.externals.three.InstancedMesh
 import world.phantasmal.web.externals.three.Mesh
-import world.phantasmal.web.externals.three.Object3D
 import world.phantasmal.web.questEditor.loading.EntityAssetLoader
 import world.phantasmal.web.questEditor.loading.LoadingCache
 import world.phantasmal.web.questEditor.models.QuestEntityModel
-import world.phantasmal.web.questEditor.models.QuestNpcModel
 import world.phantasmal.web.questEditor.models.QuestObjectModel
-import world.phantasmal.web.questEditor.models.WaveModel
 import world.phantasmal.web.questEditor.stores.QuestEditorStore
 import world.phantasmal.webui.DisposableContainer
 
@@ -26,30 +19,34 @@ class EntityMeshManager(
     private val renderer: QuestRenderer,
     private val entityAssetLoader: EntityAssetLoader,
 ) : DisposableContainer() {
-    private val entityMeshes = Group().apply { name = "Entities" }
+    /**
-
+     * Contains one [EntityInstancedMesh] per [EntityType] and model.
-    private val meshCache = addDisposable(
+     */
-        LoadingCache<CacheKey, InstancedMesh>(
+    private val entityMeshCache = addDisposable(
+        LoadingCache<TypeAndModel, EntityInstancedMesh>(
             scope,
             { (type, model) ->
                 val mesh = entityAssetLoader.loadInstancedMesh(type, model)
-                entityMeshes.add(mesh)
+                renderer.entities.add(mesh)
-                mesh
+                EntityInstancedMesh(mesh, questEditorStore.selectedWave) { entity ->
+                    // When an entity's model changes, add it again. At this point it has already
+                    // been removed from its previous [EntityInstancedMesh].
+                    add(entity)
+                }
             },
             { /* Nothing to dispose. */ },
         )
     )
 
-    private val queue: MutableList<QuestEntityModel<*, *>> = mutableListOf()
+    /**
-    private val loadedEntities: MutableList<LoadedEntity> = mutableListOf()
+     * Entity meshes that are currently being loaded.
-    private var loading = false
+     */
+    private val loadingEntities = mutableMapOf<QuestEntityModel<*, *>, Job>()
 
     private var hoveredMesh: Mesh? = null
     private var selectedMesh: Mesh? = null
 
     init {
-        renderer.scene.add(entityMeshes)
-
 //        observe(questEditorStore.selectedEntity) { entity ->
 //            if (entity == null) {
 //                unmarkSelected()
@@ -67,65 +64,59 @@ class EntityMeshManager(
     }
 
     override fun internalDispose() {
-        renderer.scene.remove(entityMeshes)
         removeAll()
-        entityMeshes.clear()
+        renderer.entities.clear()
         super.internalDispose()
     }
 
     fun add(entity: QuestEntityModel<*, *>) {
-        queue.add(entity)
+        loadingEntities.getOrPut(entity) {
-
-        if (!loading) {
-            loading = true
-
             scope.launch {
                 try {
-                    while (queue.isNotEmpty()) {
+                    val meshContainer = entityMeshCache.get(TypeAndModel(
-                        val queuedEntity = queue.first()
+                        type = entity.type,
+                        model = (entity as? QuestObjectModel)?.model?.value
+                    ))
 
-                        try {
+//            if (entity == questEditorStore.selectedEntity.value) {
-                            load(queuedEntity)
+//                markSelected(instance)
-                        } catch (e: Error) {
+//            }
-                            logger.error(e) {
+
-                                "Couldn't load model for entity of type ${queuedEntity.type}."
+                    meshContainer.addInstance(entity)
-                            }
+                    loadingEntities.remove(entity)
-                            queue.remove(queuedEntity)
+                } catch (e: CancellationException) {
-                        }
+                    // Do nothing.
+                } catch (e: Throwable) {
+                    loadingEntities.remove(entity)
+                    logger.error(e) {
+                        "Couldn't load mesh for entity of type ${entity.type}."
                     }
-                } finally {
-                    loading = false
                 }
             }
         }
     }
 
     fun remove(entity: QuestEntityModel<*, *>) {
-        queue.remove(entity)
+        loadingEntities.remove(entity)?.cancel()
 
-        val idx = loadedEntities.indexOfFirst { it.entity == entity }
+        entityMeshCache.getIfPresentNow(
-
+            TypeAndModel(
-        if (idx != -1) {
+                entity.type,
-            val loaded = loadedEntities.removeAt(idx)
+                (entity as? QuestObjectModel)?.model?.value
-            loaded.mesh.count--
+            )
-
+        )?.removeInstance(entity)
-            for (i in idx until loaded.mesh.count) {
-                loaded.mesh.instanceMatrix.copyAt(i, loaded.mesh.instanceMatrix, i + 1)
-                loadedEntities[i].instanceIndex = i
-            }
-
-            loaded.dispose()
-        }
     }
 
+    @OptIn(ExperimentalCoroutinesApi::class)
     fun removeAll() {
-        for (loaded in loadedEntities) {
+        loadingEntities.values.forEach { it.cancel() }
-            loaded.mesh.count = 0
+        loadingEntities.clear()
-            loaded.dispose()
-        }
 
-        loadedEntities.clear()
+        for (meshContainerDeferred in entityMeshCache.values) {
-        queue.clear()
+            if (meshContainerDeferred.isCompleted) {
+                meshContainerDeferred.getCompleted().clearInstances()
+            }
+        }
     }
 
 //    private fun markSelected(entityMesh: AbstractMesh) {
@@ -147,95 +138,5 @@ class EntityMeshManager(
 //        selectedMesh = null
 //    }
 
-    private suspend fun load(entity: QuestEntityModel<*, *>) {
+    private data class TypeAndModel(val type: EntityType, val model: Int?)
-        val mesh = meshCache.get(CacheKey(
-            type = entity.type,
-            model = (entity as? QuestObjectModel)?.model?.value
-        ))
-
-        // Only add an instance of this mesh if the entity is still in the queue at this point.
-        if (queue.remove(entity)) {
-            val instanceIndex = mesh.count
-            mesh.count++
-
-//            if (entity == questEditorStore.selectedEntity.value) {
-//                markSelected(instance)
-//            }
-
-            loadedEntities.add(LoadedEntity(
-                entity,
-                mesh,
-                instanceIndex,
-                questEditorStore.selectedWave
-            ))
-        }
-    }
-
-    private data class CacheKey(val type: EntityType, val model: Int?)
-
-    private inner class LoadedEntity(
-        val entity: QuestEntityModel<*, *>,
-        val mesh: InstancedMesh,
-        var instanceIndex: Int,
-        selectedWave: Val<WaveModel?>,
-    ) : DisposableContainer() {
-        init {
-            updateMatrix()
-
-            addDisposables(
-                entity.worldPosition.observe { updateMatrix() },
-                entity.worldRotation.observe { updateMatrix() },
-            )
-
-            val isVisible: Val<Boolean>
-
-            if (entity is QuestNpcModel) {
-                isVisible =
-                    entity.sectionInitialized.map(
-                        selectedWave,
-                        entity.wave
-                    ) { sectionInitialized, sWave, entityWave ->
-                        sectionInitialized && (sWave == null || sWave == entityWave)
-                    }
-            } else {
-                isVisible = entity.section.isNotNull()
-
-                if (entity is QuestObjectModel) {
-                    addDisposable(entity.model.observe(callNow = false) {
-                        remove(entity)
-                        add(entity)
-                    })
-                }
-            }
-
-//            observe(isVisible) { visible ->
-//                mesh.setEnabled(visible)
-//            }
-        }
-
-        override fun internalDispose() {
-            // TODO: Dispose instance.
-            super.internalDispose()
-        }
-
-        private fun updateMatrix() {
-            instanceHelper.position.set(
-                entity.worldPosition.value.x,
-                entity.worldPosition.value.y,
-                entity.worldPosition.value.z,
-            )
-            instanceHelper.rotation.set(
-                entity.worldRotation.value.x,
-                entity.worldRotation.value.y,
-                entity.worldRotation.value.z,
-            )
-            instanceHelper.updateMatrix()
-            mesh.setMatrixAt(instanceIndex, instanceHelper.matrix)
-            mesh.instanceMatrix.needsUpdate = true
-        }
-    }
-
-    companion object {
-        private val instanceHelper = Object3D()
-    }
 }

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/MeshMetadata.kt

@@ -1,9 +0,0 @@
-package world.phantasmal.web.questEditor.rendering
-
-import world.phantasmal.web.questEditor.models.QuestEntityModel
-
-class EntityMetadata(val entity: QuestEntityModel<*, *>)
-
-interface CollisionUserData {
-    var collisionMesh: Boolean
-}

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/QuestRenderer.kt

@@ -2,6 +2,7 @@ package world.phantasmal.web.questEditor.rendering
 
 import world.phantasmal.web.core.rendering.DisposableThreeRenderer
 import world.phantasmal.web.core.rendering.Renderer
+import world.phantasmal.web.externals.three.Group
 import world.phantasmal.web.externals.three.Object3D
 import world.phantasmal.web.externals.three.PerspectiveCamera
 
@@ -16,30 +17,39 @@ class QuestRenderer(
         far = 5_000.0
     )
 ) {
-    var collisionGeometry: Object3D? = null
+    val entities: Object3D = Group().apply {
+        name = "Entities"
+        scene.add(this)
+    }
+
+    var collisionGeometry: Object3D = DEFAULT_COLLISION_GEOMETRY
         set(geom) {
-            field?.let { scene.remove(it) }
+            scene.remove(field)
             field = geom
-            geom?.let { scene.add(it) }
+            scene.add(geom)
         }
 
     init {
         camera.position.set(0.0, 50.0, 200.0)
-        controls.update()
+    }
 
+    override fun initializeControls() {
+        super.initializeControls()
         controls.screenSpacePanning = false
+        controls.update()
     }
 
     fun resetCamera() {
+        // TODO: Camera reset.
     }
 
-    fun enableCameraControls() {
+    fun clearCollisionGeometry() {
+        collisionGeometry = DEFAULT_COLLISION_GEOMETRY
     }
 
-    fun disableCameraControls() {
+    companion object {
-    }
+        private val DEFAULT_COLLISION_GEOMETRY = Group().apply {
-
+            name = "Default Collision Geometry"
-    override fun render() {
+        }
-        super.render()
     }
 }

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/UserInputManager.kt

@@ -4,10 +4,9 @@ import kotlinx.browser.document
 import mu.KotlinLogging
 import org.w3c.dom.pointerevents.PointerEvent
 import world.phantasmal.core.disposable.Disposable
-import world.phantasmal.web.externals.three.Intersection
+import world.phantasmal.web.core.minus
-import world.phantasmal.web.externals.three.Raycaster
+import world.phantasmal.web.core.plusAssign
-import world.phantasmal.web.externals.three.Vector2
+import world.phantasmal.web.externals.three.*
-import world.phantasmal.web.externals.three.Vector3
 import world.phantasmal.web.questEditor.actions.TranslateEntityAction
 import world.phantasmal.web.questEditor.models.QuestEntityModel
 import world.phantasmal.web.questEditor.models.SectionModel
@@ -17,17 +16,18 @@ import world.phantasmal.webui.dom.disposableListener
 
 private val logger = KotlinLogging.logger {}
 
-private val ZERO_VECTOR = Vector3(0.0, 0.0, 0.0)
+private val ZERO_VECTOR_2 = Vector2(0.0, 0.0)
+private val ZERO_VECTOR_3 = Vector3(0.0, 0.0, 0.0)
+private val UP_VECTOR = Vector3(0.0, 1.0, 0.0)
 private val DOWN_VECTOR = Vector3(0.0, -1.0, 0.0)
 
-private val raycaster = Raycaster()
-
 class UserInputManager(
     questEditorStore: QuestEditorStore,
     private val renderer: QuestRenderer,
 ) : DisposableContainer() {
     private val stateContext = StateContext(questEditorStore, renderer)
     private val pointerPosition = Vector2()
+    private val pointerDevicePosition = Vector2()
     private val lastPointerPosition = Vector2()
     private var movedSinceLastPointerDown = false
     private var state: State
@@ -55,6 +55,8 @@ class UserInputManager(
         )
 
         onPointerMoveListener = disposableListener(document, "pointermove", ::onPointerMove)
+
+        renderer.initializeControls()
     }
 
     override fun internalDispose() {
@@ -71,6 +73,7 @@ class UserInputManager(
                 e.buttons.toInt(),
                 shiftKeyDown = e.shiftKey,
                 movedSinceLastPointerDown,
+                pointerDevicePosition,
             )
         )
 
@@ -90,6 +93,7 @@ class UserInputManager(
                     e.buttons.toInt(),
                     shiftKeyDown = e.shiftKey,
                     movedSinceLastPointerDown,
+                    pointerDevicePosition,
                 )
             )
         } finally {
@@ -111,6 +115,7 @@ class UserInputManager(
                 e.buttons.toInt(),
                 shiftKeyDown = e.shiftKey,
                 movedSinceLastPointerDown,
+                pointerDevicePosition,
             )
         )
     }
@@ -118,6 +123,8 @@ class UserInputManager(
     private fun processPointerEvent(e: PointerEvent) {
         val rect = renderer.canvas.getBoundingClientRect()
         pointerPosition.set(e.clientX - rect.left, e.clientY - rect.top)
+        pointerDevicePosition.copy(pointerPosition)
+        renderer.pointerPosToDeviceCoords(pointerDevicePosition)
 
         when (e.type) {
             "pointerdown" -> {
@@ -138,28 +145,12 @@ private class StateContext(
     private val questEditorStore: QuestEditorStore,
     val renderer: QuestRenderer,
 ) {
-//    private val plane = Plane.FromPositionAndNormal(Vector3.Up(), Vector3.Up())
-//    private val ray = Ray.Zero()
-
     val scene = renderer.scene
 
     fun setSelectedEntity(entity: QuestEntityModel<*, *>?) {
         questEditorStore.setSelectedEntity(entity)
     }
 
-    fun translate(
-        entity: QuestEntityModel<*, *>,
-        dragAdjust: Vector3,
-        grabOffset: Vector3,
-        vertically: Boolean,
-    ) {
-        if (vertically) {
-            // TODO: Vertical translation.
-        } else {
-//            translateEntityHorizontally(entity, dragAdjust, grabOffset)
-        }
-    }
-
     fun finalizeTranslation(
         entity: QuestEntityModel<*, *>,
         newSection: SectionModel?,
@@ -180,82 +171,56 @@ private class StateContext(
     }
 
     /**
-     * If the drag-adjusted pointer is over the ground, translate an entity horizontally across the
+     * @param origin position in normalized device space.
-     * ground. Otherwise translate the entity over the horizontal plane that intersects its origin.
      */
-//    private fun translateEntityHorizontally(
+    fun pickGround(origin: Vector2, dragAdjust: Vector3 = ZERO_VECTOR_3): Intersection? =
-//        entity: QuestEntityModel<*, *>,
+        intersectObject(origin, renderer.collisionGeometry, dragAdjust) { intersection ->
-//        dragAdjust: Vector3,
+            // Don't allow entities to be placed on very steep terrain. E.g. walls.
-//        grabOffset: Vector3,
+            // TODO: make use of the flags field in the collision data.
-//    ) {
+            intersection.face?.normal?.let { n -> n.y > 0.75 } ?: false
-//        val pick = pickGround(scene.pointerX, scene.pointerY, dragAdjust)
+        }
-//
+
-//        if (pick == null) {
+    inline fun intersectObject(
-//            // If the pointer is not over the ground, we translate the entity across the horizontal
+        origin: Vector3,
-//            // plane in which the entity's origin lies.
+        direction: Vector3,
-//            scene.createPickingRayToRef(
+        obj3d: Object3D,
-//                scene.pointerX,
+        predicate: (Intersection) -> Boolean = { true },
-//                scene.pointerY,
+    ): Intersection? {
-//                Matrix.IdentityReadOnly,
+        raycaster.set(origin, direction)
-//                ray,
+        raycasterIntersections.asDynamic().splice(0)
-//                renderer.camera
+        raycaster.intersectObject(obj3d, recursive = true, raycasterIntersections)
-//            )
+        return raycasterIntersections.find(predicate)
-//
+    }
-//            plane.d = -entity.worldPosition.value.y + grabOffset.y
+
-//
+    /**
-//            ray.intersectsPlane(plane)?.let { distance ->
+     * The ray's direction is determined by the camera.
-//                // Compute the intersection point.
+     *
-//                val pos = ray.direction * distance
+     * @param origin ray origin in normalized device space.
-//                pos += ray.origin
+     * @param translateOrigin vector by which to translate the ray's origin after construction from
-//                // Compute the entity's new world position.
+     * the camera.
-//                pos.x += grabOffset.x
+     */
-//                pos.y = entity.worldPosition.value.y
+    inline fun intersectObject(
-//                pos.z += grabOffset.z
+        origin: Vector2,
-//
+        obj3d: Object3D,
-//                entity.setWorldPosition(pos)
+        translateOrigin: Vector3 = ZERO_VECTOR_3,
-//            }
+        predicate: (Intersection) -> Boolean = { true },
-//        } else {
+    ): Intersection? {
-//            // TODO: Set entity section.
+        raycaster.setFromCamera(origin, renderer.camera)
-//            entity.setWorldPosition(
+        raycaster.ray.origin += translateOrigin
-//                Vector3(
+        raycasterIntersections.asDynamic().splice(0)
-//                    pick.pickedPoint!!.x,
+        raycaster.intersectObject(obj3d, recursive = true, raycasterIntersections)
-//                    pick.pickedPoint.y + grabOffset.y - dragAdjust.y,
+        return raycasterIntersections.find(predicate)
-//                    pick.pickedPoint.z,
+    }
-//                )
+
-//            )
+    fun intersectPlane(origin: Vector2, plane: Plane, intersectionPoint: Vector3): Vector3? {
-//        }
+        raycaster.setFromCamera(origin, renderer.camera)
-//    }
+        return raycaster.ray.intersectPlane(plane, intersectionPoint)
-//
+    }
-//    fun pickGround(x: Double, y: Double, dragAdjust: Vector3 = ZERO_VECTOR): PickingInfo? {
+
-//        scene.createPickingRayToRef(
+    companion object {
-//            x,
+        private val raycaster = Raycaster()
-//            y,
+        private val raycasterIntersections = arrayOf<Intersection>()
-//            Matrix.IdentityReadOnly,
+    }
-//            ray,
-//            renderer.camera
-//        )
-//
-//        ray.origin += dragAdjust
-//
-//        val pickingInfoArray = scene.multiPickWithRay(
-//            ray,
-//            { it.isEnabled() && it.metadata is CollisionUserData },
-//        )
-//
-//        if (pickingInfoArray != null) {
-//            for (pickingInfo in pickingInfoArray) {
-//                pickingInfo.getNormal()?.let { n ->
-//                    // Don't allow entities to be placed on very steep terrain. E.g. walls.
-//                    // TODO: make use of the flags field in the collision data.
-//                    if (n.y > 0.75) {
-//                        return pickingInfo
-//                    }
-//                }
-//            }
-//        }
-//
-//        return null
-//    }
 }
 
 private sealed class Evt
@@ -264,29 +229,37 @@ private sealed class PointerEvt : Evt() {
     abstract val buttons: Int
     abstract val shiftKeyDown: Boolean
     abstract val movedSinceLastPointerDown: Boolean
+
+    /**
+     * Pointer position in normalized device space.
+     */
+    abstract val pointerDevicePosition: Vector2
 }
 
 private class PointerDownEvt(
     override val buttons: Int,
     override val shiftKeyDown: Boolean,
     override val movedSinceLastPointerDown: Boolean,
+    override val pointerDevicePosition: Vector2,
 ) : PointerEvt()
 
 private class PointerUpEvt(
     override val buttons: Int,
     override val shiftKeyDown: Boolean,
     override val movedSinceLastPointerDown: Boolean,
+    override val pointerDevicePosition: Vector2,
 ) : PointerEvt()
 
 private class PointerMoveEvt(
     override val buttons: Int,
     override val shiftKeyDown: Boolean,
     override val movedSinceLastPointerDown: Boolean,
+    override val pointerDevicePosition: Vector2,
 ) : PointerEvt()
 
 private class Pick(
     val entity: QuestEntityModel<*, *>,
-//    val mesh: AbstractMesh,
+    val mesh: InstancedMesh,
 
     /**
      * Vector that points from the grabbing point (somewhere on the model's surface) to the entity's
@@ -319,42 +292,55 @@ private class IdleState(
     private val ctx: StateContext,
     private val entityManipulationEnabled: Boolean,
 ) : State() {
+    private var panning = false
+
     override fun processEvent(event: Evt): State {
         when (event) {
-//            is PointerDownEvt -> {
+            is PointerDownEvt -> {
-//                pickEntity()?.let { pick ->
+                when (event.buttons) {
-//                    when (event.buttons) {
+                    1 -> {
-//                        1 -> {
+                        val pick = pickEntity(event.pointerDevicePosition)
-//                            ctx.setSelectedEntity(pick.entity)
-//
-//                            if (entityManipulationEnabled) {
-//                                return TranslationState(
-//                                    ctx,
-//                                    pick.entity,
-//                                    pick.dragAdjust,
-//                                    pick.grabOffset
-//                                )
-//                            }
-//                        }
-//                        2 -> {
-//                            ctx.setSelectedEntity(pick.entity)
-//
-//                            if (entityManipulationEnabled) {
-//                                // TODO: Enter RotationState.
-//                            }
-//                        }
-//                    }
-//                }
-//            }
 
-//            is PointerUpEvt -> {
+                        if (pick == null) {
-//                updateCameraTarget()
+                            panning = true
-//
+                        } else {
-//                // If the user clicks on nothing, deselect the currently selected entity.
+                            ctx.setSelectedEntity(pick.entity)
-//                if (!event.movedSinceLastPointerDown && pickEntity() == null) {
+
-//                    ctx.setSelectedEntity(null)
+                            if (entityManipulationEnabled) {
-//                }
+                                return TranslationState(
-//            }
+                                    ctx,
+                                    pick.entity,
+                                    pick.dragAdjust,
+                                    pick.grabOffset
+                                )
+                            }
+                        }
+                    }
+                    2 -> {
+                        pickEntity(event.pointerDevicePosition)?.let { pick ->
+                            ctx.setSelectedEntity(pick.entity)
+
+                            if (entityManipulationEnabled) {
+                                // TODO: Enter RotationState.
+                            }
+                        }
+                    }
+                }
+            }
+
+            is PointerUpEvt -> {
+                if (panning) {
+                    panning = false
+                    updateCameraTarget()
+                }
+
+                // If the user clicks on nothing, deselect the currently selected entity.
+                if (!event.movedSinceLastPointerDown &&
+                    pickEntity(event.pointerDevicePosition) == null
+                ) {
+                    ctx.setSelectedEntity(null)
+                }
+            }
 
             else -> {
                 // Do nothing.
@@ -369,50 +355,58 @@ private class IdleState(
     }
 
     private fun updateCameraTarget() {
-        // If the user moved the camera, try setting the camera
+        // If the user moved the camera, try setting the camera target to a better point.
-        // target to a better point.
+        ctx.pickGround(ZERO_VECTOR_2)?.let { intersection ->
-//        ctx.pickGround(
+            ctx.renderer.controls.target = intersection.point
-//            ctx.renderer.engine.getRenderWidth() / 2,
+            ctx.renderer.controls.update()
-//            ctx.renderer.engine.getRenderHeight() / 2,
+        }
-//        )?.pickedPoint?.let { newTarget ->
-//            ctx.renderer.camera.target = newTarget
-//        }
     }
 
     /**
      * @param pointerPosition pointer coordinates in normalized device space
      */
-//    private fun pickEntity(pointerPosition:Vector2): Pick? {
+    private fun pickEntity(pointerPosition: Vector2): Pick? {
-//        // Find the nearest object and NPC under the pointer.
+        // Find the nearest entity under the pointer.
-//        raycaster.setFromCamera(pointerPosition, ctx.renderer.camera)
+        val intersection = ctx.intersectObject(
-//        val pickInfo = ctx.scene.pick(ctx.scene.pointerX, ctx.scene.pointerY)
+            pointerPosition,
-//        if (pickInfo?.pickedMesh == null) return null
+            ctx.renderer.entities,
-//
+        ) { it.`object`.visible }
-//        val entity = (pickInfo.pickedMesh.metadata as? EntityMetadata)?.entity
+
-//            ?: return null
+        intersection ?: return null
-//
+
-//        // Vector from the point where we grab the entity to its position.
+        val entityInstancedMesh = intersection.`object`.userData
-//        val grabOffset = pickInfo.pickedMesh.position - pickInfo.pickedPoint!!
+        val instanceIndex = intersection.instanceId
-//
+
-//        // Vector from the point where we grab the entity to the point on the ground right beneath
+        if (instanceIndex == null || entityInstancedMesh !is EntityInstancedMesh) {
-//        // its position. The same as grabOffset when an entity is standing on the ground.
+            return null
-//        val dragAdjust = grabOffset.clone()
+        }
-//
+
-//        // Find vertical distance to the ground.
+        val entity = entityInstancedMesh.getInstanceAt(instanceIndex).entity
-//        ctx.scene.pickWithRay(
+        val entityPosition = entity.worldPosition.value
-//            Ray(pickInfo.pickedMesh.position, DOWN_VECTOR),
+
-//            { it.isEnabled() && it.metadata is CollisionUserData },
+        // Vector from the point where we grab the entity to its position.
-//        )?.let { groundPick ->
+        val grabOffset = entityPosition - intersection.point
-//            dragAdjust.y -= groundPick.distance
+
-//        }
+        // Vector from the point where we grab the entity to the point on the ground right beneath
-//
+        // its position. The same as grabOffset when an entity is standing on the ground.
-//        return Pick(
+        val dragAdjust = grabOffset.clone()
-//            entity,
+
-//            pickInfo.pickedMesh,
+        // Find vertical distance to the ground.
-//            grabOffset,
+        ctx.intersectObject(
-//            dragAdjust,
+            origin = entityPosition,
-//        )
+            direction = DOWN_VECTOR,
-//    }
+            ctx.renderer.collisionGeometry,
+        )?.let { groundIntersection ->
+            dragAdjust.y -= groundIntersection.distance
+        }
+
+        return Pick(
+            entity,
+            intersection.`object` as InstancedMesh,
+            grabOffset,
+            dragAdjust,
+        )
+    }
 }
 
 private class TranslationState(
@@ -426,7 +420,7 @@ private class TranslationState(
     private var cancelled = false
 
     init {
-        ctx.renderer.disableCameraControls()
+        ctx.renderer.controls.enabled = false
     }
 
     override fun processEvent(event: Evt): State =
@@ -436,12 +430,7 @@ private class TranslationState(
                     IdleState(ctx, entityManipulationEnabled = true)
                 } else {
                     if (event.movedSinceLastPointerDown) {
-                        ctx.translate(
+                        translate(event.pointerDevicePosition, vertically = event.shiftKeyDown)
-                            entity,
-                            dragAdjust,
-                            grabOffset,
-                            vertically = event.shiftKeyDown,
-                        )
                     }
 
                     this
@@ -449,7 +438,7 @@ private class TranslationState(
             }
 
             is PointerUpEvt -> {
-                ctx.renderer.enableCameraControls()
+                ctx.renderer.controls.enabled = true
 
                 if (!cancelled && event.movedSinceLastPointerDown) {
                     ctx.finalizeTranslation(
@@ -474,7 +463,7 @@ private class TranslationState(
 
     override fun cancel() {
         cancelled = true
-        ctx.renderer.enableCameraControls()
+        ctx.renderer.controls.enabled = true
 
         initialSection?.let {
             entity.setSection(initialSection)
@@ -482,4 +471,51 @@ private class TranslationState(
 
         entity.setWorldPosition(initialPosition)
     }
+
+    /**
+     * @param pointerPosition pointer position in normalized device space
+     */
+    private fun translate(pointerPosition: Vector2, vertically: Boolean) {
+        if (vertically) {
+            // TODO: Vertical translation.
+        } else {
+            translateEntityHorizontally(pointerPosition)
+        }
+    }
+
+    /**
+     * If the drag-adjusted pointer is over the ground, translate an entity horizontally across the
+     * ground. Otherwise translate the entity over the horizontal plane that intersects its origin.
+     */
+    private fun translateEntityHorizontally(pointerPosition: Vector2) {
+        val pick = ctx.pickGround(pointerPosition, dragAdjust)
+
+        if (pick == null) {
+            // If the pointer is not over the ground, we translate the entity across the horizontal
+            // plane in which the entity's origin lies.
+            plane.set(UP_VECTOR, -entity.worldPosition.value.y + grabOffset.y)
+
+            ctx.intersectPlane(pointerPosition, plane, tmpVec)?.let { pointerPosOnPlane ->
+                entity.setWorldPosition(Vector3(
+                    pointerPosOnPlane.x + grabOffset.x,
+                    entity.worldPosition.value.y,
+                    pointerPosOnPlane.z + grabOffset.z,
+                ))
+            }
+        } else {
+            // TODO: Set entity section.
+            entity.setWorldPosition(
+                Vector3(
+                    pick.point.x,
+                    pick.point.y + grabOffset.y - dragAdjust.y,
+                    pick.point.z,
+                )
+            )
+        }
+    }
+
+    companion object {
+        private val plane = Plane()
+        private val tmpVec = Vector3()
+    }
 }

web/src/main/kotlin/world/phantasmal/web/viewer/rendering/MeshRenderer.kt

@@ -27,9 +27,10 @@ class MeshRenderer(
 
     init {
         camera.position.set(0.0, 50.0, 200.0)
-        controls.update()
 
+        initializeControls()
         controls.screenSpacePanning = true
+        controls.update()
 
         observe(store.currentNinjaObject, store.currentTextures, ::ninjaObjectOrXvmChanged)
     }

web/src/main/kotlin/world/phantasmal/web/viewer/rendering/TextureRenderer.kt

@@ -25,6 +25,7 @@ class TextureRenderer(
     private var meshes = listOf<Mesh>()
 
     init {
+        initializeControls()
         observe(store.currentTextures, ::texturesChanged)
     }