<Bounds />

[andretchen0]

Description

As a developer using TresJS, I would like to have a component that can keep child components centered on screen, even after screen resizes.

Suggested solution

A component that works like Drei's <Bounds /> would be welcome.

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[schplitt]

I would like to implement this.
I have a suggestion for how to 'improve' the behavior.
It seems that the current implementation of Drei's Bounds does not take into account, that the camera might not be directly looking at the Bounds. Thus the bounds may not fit if the margin is 1.

This can be fixed if the rendered 2d output is taken for determining the distance the camera has to be.
It is a bit more computational work, but might be worth it to always assure correct bounds.

This could then also be used to implement a more html like margin where the margin actually represents the margin from the edges of the rendered image and not an arbitrary distance modification.

What are your thoughts on this?

[andretchen0]

Hey @JakobHock

Sure thing. You're welcome to implement <Bounds />.

This can be fixed if the rendered 2d output is taken for determining the distance the camera has to be.
It is a bit more computational work, but might be worth it to always assure correct bounds.

I think this could work, but as you mention, it's going to be more expensive computationally. Since some users will call this every frame, ideally, I think we should aim for a solution that doesn't require rendering.

---

Otherwise, I noticed that Cientos is missing a <Cylinder /> shape. I created an issue here.

That might be a good first issue, since it'll expose you to the other stuff that's involved in publishing a Cientos component – creating/updating a playground, writing docs/demos – without also being challenging to implement in its own right.

And I personally find the shape components super handy and would like to have another!

Let me know if that sounds good and I'll assign you so others don't duplicate your effort.

Your call though. Thanks!

[schplitt]

Hello @andretchen0,

I will hold off on implementing <Bounds />.
I think i might have a misconception of what Drei is doing. As far as i can tell it calculates the end position once and tries to prevent the user from hijacking the camera controls. Thus the position would only be calculated once. This is also what i have implemented in my POC.
But as my react skills are somewhat poor it might have gotten the wrong idea.
Happy to discuss though!

Anyway i will take you up on your offer to start with the <Cylinder /> component. :)

---

Here is the type that would be returned by the useBounds composable and the props of the <Bounds /> component:

Bounds:

export type Bounds = {
	/**
	 * Indicates if the bounds animation is playing. Is `true` even if the animation is paused.
	 */
	playing: ComputedRef<boolean>
	/**
	 * Indicates if the bounds animation is paused.
	 */
	paused: ComputedRef<boolean>
	/**
	 * Indicates if the bounds animation has finished.
	 */
	finished: ComputedRef<boolean>
	/**
	 * The current progress of the animation. It is a number between 0 and 1.
	 */
	progress: ComputedRef<number>
	/**
	 * Plays the animation according to the props given to the `<Bounds />` component. Camera controls if present are disabled during the animation.
	 */
	play: () => void
	/**
	 * Pauses the animation. Does not enable camera controls.
	 */
	pause: () => void
	/**
	 * Resumes the animation.
	 */
	resume: () => void
	/**
	 * Skips the animation and sets the view immediately to the end.
	 */
	skip: () => void
	/**
	 * Stops the animation and resets the the camera to the initial position.
	 */
	reset: () => void
	/**
	 * Aborts the animation. Leaves the camera at the position at which the animation was aborted.
	 */
	abort: () => void
	/**
	 * Callback function that is called when the animation starts.
	 */
	onStart: (callback: (startPosition: Vector3, endPosition: Vector3) => {}) => void
	/**
	 * Callback function that is called when the animation ends.
	 */
	onEnd: (callback: (startPosition: Vector3, endPosition: Vector3) => {}) => void
}

Props:

export type BoundsProps = {
		immediate?: boolean
		margin?: number
		duration?: number
		interpolateFunc?: (t: number) => number
}

[andretchen0]

@JakobHock ,

It's totally possible I'm misinterpreting what Drei's <Bounds /> is doing.

Good to hear about <Cylinder />. I've assigned it to myself for now, just to let others know that someone's working on it. If you want to comment over there, I should be able to assign it to you.

Cheers!