Issues with Camera API after migrating to 2.0

Grasshopper ShapeDiver
1

Hi there, I had some camera settings adjusted upon Viewer (now Viewport) initialization which are no longer working as expected after migrating from 1.15.7 to 2.0.7.

Here’s my React component:

import React, { useEffect } from "react";

import { createViewport, createSession } from "@shapediver/viewer";

const ModelViewer = (props) => {
	useEffect(async () => {
		const session = await createSession({
			ticket: ticket,
			modelViewUrl: "https://sdeuc1.eu-central-1.shapediver.com",
			id: "mySession",
		});

		const viewport = await createViewport({
			canvas: containerRef.current,
			id: "myViewport",
			branding: {
				backgroundColor: "#ffffff",
				busyModeDisplay: "blur",
			},
		});

		const camera = viewport.camera;

		camera.cubePositionRestriction = {
			min: [-Infinity, -Infinity, 0],
			max: [Infinity, Infinity, Infinity],
		};
		camera.cubeTargetRestriction = {
			min: [-Infinity, -Infinity, 0],
			max: [Infinity, Infinity, Infinity],
		};

		await camera.animate(
			[
				{
					position: [-187, -344, 110],
					target: camera.defaultTarget,
				},
				{
					position: [-10, -244, 80],
					target: camera.defaultTarget,
				},
				{
					position: camera.defaultPosition,
					target: camera.defaultTarget,
				},
			],
			{
				duration: 10000,
				easing: "Cubic.InOut",
				interpolation: "Linear",
			}
		);

		console.log("here", viewport, camera);
	}, []);

	return <canvas ref={containerRef} />;
};

export default ModelViewer;

The log output shows that the PerspectiveCameraApi has the settings correctly configured. However, the Viewport does not animate or restrict the camera controls as intended.

I’m using shapediver v2.0.7 and react v17.0.2. Is there something obvious I’m missing in the migration here? Let me know if I can provide any additional info.

2

Hey @Tim_Thimmaiah,
this was an issue on our side. The camera animation never started because the ending position and target where no within the restriction. I change the behavior of this now in version 2.0.9. Please try it out and let me know.
Cheers, Michael

3

Thanks for taking a look! I upgraded to 2.0.9 but still facing the same issue.

I removed the animate call and wanted to see if I can at least apply the cubePositionRestriction, or even setting camera.enabled = false. Again, when I access the viewport it is showing that the iPerspectiveAPI has those settings correctly set however I can still adjust the camera and move it beyond the restrictions.

4

I did try and recreate this in a pure vanilla JS file and am seeing the model behave as intended here: camera restriction (forked) - CodeSandbox

This leads me to think this is something specific to React or maybe even SSR (as I’m using Nextjs), although I am following the dynamic import approach as was documented here: Next.js / Serverless Script Loading

5

Hey @Tim_Thimmaiah,

really interesting issue. Do you maybe have a minimal example to share with us where this issue occurs?

You can also try and evaluate if the viewport is maybe initialized multiple times. I’m not saying that this is the issue, but I had a similar problem a while back.

Cheers

6

Hey @MajorMeerkatThe3rd - appreciate the guidance. I spent a good amount of time trying a lot of different things here, and I suspect the issue is probably related to accessing the camera before the end of the component React lifecycle.

I solved this by moving my settings to manipulate the camera to a parent component and using a useEffect to “listen” to the session and viewer being created in a child component and then applying the camera settings there.

So for others that get stuck with this, if you have a component where the session and viewer create, pass down a state like sessionAndViewer which you can set in your child component, and in the parent component, you can use something like this:

useEffect(() => {
		if (sessionAndViewer.viewport) {
			console.log("final viewport", sessionAndViewer.viewport);

			const camera = sessionAndViewer.viewport.camera;

			camera.cubePositionRestriction = {
				min: [-Infinity, -Infinity, 40],
				max: [Infinity, Infinity, Infinity],
			};
			camera.cubeTargetRestriction = {
				min: [-Infinity, -Infinity, 0],
				max: [Infinity, Infinity, Infinity],
			};
		}
	}, [sessionAndViewer]);

This isn’t super pretty but hey it works!

What’s more strange is that this wasn’t an issue in < v2.0.0 so I’m more baffled by what could be causing this behavior.

Either way, thanks as always for the help!

7

Thank you @Tim_Thimmaiah for sharing your findings. Always great to have developers like you on here that try to help others!