Unable to Move Object Programmatically When Game Controls and Following Camera are Added

[realitydesigners]

Description:
I am experiencing an issue where I cannot programmatically move an object if the object has GameControls and a following camera attached in Spline. The issue does not occur when GameControls is not added to an object.

Steps to Reproduce:

1. Add GameControls and a following camera to an object (e.g., a sphere) in the Spline editor.
2. Export the scene and integrate it into a React application using react-spline.
3. Attempt to programmatically move the object using a reference and updating its position property.

Expected Behavior:
The object should move to the new position when its position property is updated programmatically.

Use Case:
The use case for this functionality is to reload the same scene with a button click, where the game object appears at a different coordinate. This would be achieved using the onLoad function to set the initial position of the object.

Actual Behavior:
The object’s position does not change, even though the position values are updated.

Code Example:

"use client";
import Navbar from "@/components/navigation/Navbar";
import React, { useRef } from "react";
import SplineScene from "./SplineScene";

const Home = () => {
  const splineRef = useRef(null);
  const sphereRef = useRef(null);

  function onLoad(spline) {
    splineRef.current = spline;

    const sphereObject = spline.findObjectByName("Sphere");
    if (sphereObject) {
      console.log("Sphere object:", sphereObject);
      sphereObject.position.x = -400;
      sphereObject.position.z = -8000;
      sphereRef.current = sphereObject; // Save the sphere object to the ref
    }
  }

  const moveObj = () => {
    if (sphereRef.current) {
      sphereRef.current.position.x += 10; // Move the sphere along the x-axis
      console.log("Moved Sphere to:", sphereRef.current.position);
    }
  };

  return (
    <main className="w-screen h-screen">
      <Navbar />
      <div className="relative w-screen h-screen">
        <SplineScene onLoad={onLoad} />
        <button onClick={moveObj} className="absolute bottom-10 left-40 bg-green-500 text-white px-4 py-2 rounded">
          Move Sphere
        </button>
      </div>
    </main>
  );
};

export default Home;

[realitydesigners]

I found a solution to the issue. Essentially, what I've done is go into the Spline editor and make a group called GameObject and inside the group have the camera and the game object with the game controls attached to a sphere.

So then, in my code, when I find the object by name GameObject, I'm actually finding the group and moving the group, which by default will also move the game object. The game object naturally is going to carry along with the camera. This code works, but I'm wondering if this is how it's always going to be or if there are further ways to improve this?

"use client";
import React, { useRef } from "react";
import SplineScene from "./SplineScene";

const OnLoadMoveCamera = () => {
    const splineRef = useRef(null);
    const gameObjectRef = useRef(null);

    const onLoad = (spline) => {
        splineRef.current = spline;
        const gameObject = spline.findObjectByName("GameObject");

        // GameObject is a group containing Camera + Sphere(GameControls)
        if (gameObject) {
            gameObjectRef.current = gameObject;
            gameObject.position.y += 200;
            gameObject.position.x += 100;
        }
    };

    return (
        <main className="w-screen relative justify-center flex h-screen">
            <SplineScene onLoad={onLoad} />
        </main>
    );
};

export default OnLoadMoveCamera;