Feat add mesh to canvas pos helper

.changeset/cold-socks-kick.md

@@ -0,0 +1,5 @@
+---
+'@threlte/test': minor
+---
+
+feat: add mesh to canvas pos helper

README.md

@@ -36,6 +36,7 @@ const {
   camera, // CurrentWritable<THREE.Camera>
   advance, // ({ count?: number; delta?: number }) => { frameInvalidated: boolean }
   fireEvent, // (object3D: THREE.Object3D, event, payload) => Promise<void>
+  toCanvasPosition, // (input: string | THREE.Object3D) => { x: number, y: number }
   rerender, // (props) => Promise<void>
   unmount, // () => void
 } = render(Component)
@@ -108,6 +109,22 @@ expect(onclick).toHaveBeenCalledOnce()
 
 Note that if you use the event object, you will have to design a mock payload.
 
+### toCanvasPosition
+
+`toCanvasPosition` projects a 3D object's world position into canvas pixel coordinates. It accepts either an object name string or a `THREE.Object3D` directly, and returns `{ x, y }` in pixels relative to the canvas.
+
+This is primarily useful when you want to simulate a real pointer event at the location of a 3D object:
+
+```ts
+import { userEvent } from 'vitest/browser'
+
+const { container, toCanvasPosition } = render(Scene)
+
+await userEvent.click(container, {
+  position: toCanvasPosition('box-1' /* a Mesh with name='box-1' */),
+})
+```
+
 ### Setup
 
 `@threlte/test` currently only supports vitest as your test runner. To get started, add the `threlteTesting` plugin to your Vite or Vitest config.

package.json

@@ -61,6 +61,7 @@
     "@typescript-eslint/parser": "^8.58.0",
     "@vitest/browser": "^4.1.2",
     "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/ui": "4.1.2",
     "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-perfectionist": "^5.8.0",

src/lib/pure.js

@@ -1,4 +1,5 @@
 import * as Svelte from 'svelte'
+import * as THREE from 'three'
 
 import { cleanup } from './cleanup.js'
 import Container from './Container.svelte'
@@ -28,9 +29,44 @@ import { setup } from './setup.js'
  *   advance: (options?: { count?: number; delta?: number }) => ({ frameInvalidated: boolean })
  *   rerender: (props?: Partial<import('./component-types.js').Props<C>>) => Promise<void>
  *   unmount: () => void
+ *   toCanvasPosition: (input: string | THREE.Object3D) => { x: number, y: number }
  * }} RenderResult
  */
 
+/**
+ * Get the canvas position of an Object3D.
+ *
+ * @param {THREE.Object3D | string} input
+ * @param {THREE.Scene} scene
+ * @param {HTMLElement} el
+ * @param {THREE.Camera} camera
+ * @returns {{ x: number; y: number }}
+ */
+function getObject3dCanvasPosition(input, scene, el, camera) {
+  const object3D =
+    typeof input === 'string' ? scene.getObjectByName(input) : input
+
+  if (object3D === undefined) {
+    throw new Error(`${input} not found in scene.`)
+  }
+
+  const vector = new THREE.Vector3()
+
+  object3D.getWorldPosition(vector)
+  vector.project(camera)
+
+  const rect = el.getBoundingClientRect()
+  const viewportX = rect.left + ((vector.x + 1) / 2) * rect.width
+  const viewportY = rect.top + ((-vector.y + 1) / 2) * rect.height
+
+  const position = {
+    x: viewportX - rect.left,
+    y: viewportY - rect.top,
+  }
+
+  return position
+}
+
 /**
  * Render a component into the document.
  *
@@ -74,6 +110,13 @@ const render = (Component, options = {}, renderOptions = {}) => {
     camera: component.context.camera,
     component: component.ref,
     container,
+    toCanvasPosition: (input) =>
+      getObject3dCanvasPosition(
+        input,
+        component.context.scene,
+        component.context.dom,
+        component.context.camera.current
+      ),
     context: component.context,
     scene: component.context.scene,
     advance: component.advance,

src/routes/Scene.svelte

@@ -28,7 +28,7 @@
 <T.DirectionalLight />
 <T.AmbientLight />
 
-<T.Mesh bind:ref scale={0.5} position.x={x} {onclick}>
+<T.Mesh name="box-1" bind:ref scale={0.5} position.x={x} {onclick}>
   <T.MeshStandardMaterial />
   <T.BoxGeometry />
 </T.Mesh>

src/routes/__tests__/SceneBrowser.spec.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it, vi } from 'vitest'
+import { userEvent } from 'vitest/browser'
+
+import { render } from '../../lib'
+import Subject from '../Scene.svelte'
+
+describe('SceneBrowser', () => {
+  it('calls the onclick callback when the box mesh is clicked', async () => {
+    const onclick = vi.fn()
+    const { container, rerender, toCanvasPosition } = render(Subject, {
+      props: { onclick },
+    })
+
+    const rerenderAndClickBox = async (x: number) => {
+      await rerender({ x })
+
+      await userEvent.click(container, {
+        position: toCanvasPosition('box-1'),
+      })
+    }
+
+    await rerenderAndClickBox(0.0)
+    expect(onclick).toHaveBeenCalledOnce()
+
+    onclick.mockClear()
+    await rerenderAndClickBox(0.6)
+    expect(onclick).toHaveBeenCalledOnce()
+
+    onclick.mockClear()
+    await rerenderAndClickBox(3) // this one is out of the camera frustrum so click should not be called
+    expect(onclick).not.toHaveBeenCalled()
+  })
+})