[Feature Request] Expose 2D positions of objects

[kWh61]

Use case: clicking on an object can trigger an popover card (or dialogue box) open. Note that this dialogue box is a custom react component defined outside of spline.

Why need 2D positions: currently a SplineEvent in onMouseDown only contains the target’s name and ID without telling us where the object is. Without its 2D position, we can’t position the dialogue box properly.

Desired behavior: SplineEvent provides the 2D position of the object. Or alternatively, the results from findObjectByName and findObjectByID contains the 2D position of the object (currently only has 3D).

Please let me know if there’re other ways to implement this functionality, but otherwise please take a moment to review this feature request!

[marcofugaro]

You can convert the 3D coordinates of the object to 2D coordinates by using the camera, you can do it like this:

const obj = spline.findObjectByName(event.target.name);
const camera = spline.findObjectByName('Camera'); // or the name of the camera you're using
const { x, y } = toScreenPosition(obj, camera);

You can get the code of the toScreenPosition() function from this stackoverflow answer.

[kWh61]

Hi thanks for the reply! However, the toScreenPosition() function seems to depend on three.js library. I'm using react export instead of the react three fiber export to avoid the complexities of interacting with three.js myself. Do you know any way this can be used in a pure react environment?

[marcofugaro]

you can import the Vector3 class like this to avoid all three.js from being imported:

import { Vector3 } from 'three/src/math/Vector3.js'

[Naresh-Khatri]

Sorry for replying to a 2 year old post. The suggested solution on stack overflow uses updateMatrixWorld method from three js, is there an alternative for it in spline? Sorry if im missing something here