Using external controls with useBuiltInControls: false. For example: FirstPersonControls

[RigoTamas]

Hi, I'm trying to use a different control than the built in OrbitControls. My code is something like this:

import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js';

viewer = new GaussianSplats3D.Viewer({
  rootElement: rootElement,
  selfDrivenMode: true,
  useBuiltInControls: false,
  dynamicScene: true,
  sharedMemoryForWorkers: false,
});

viewer.controls = new FirstPersonControls(viewer.camera, viewer.renderer.domElement);

viewer
  .addSplatScenes(
    [
      {
        path: '/path-to-my-splat-file',
        splatAlphaRemovalThreshold: 10,
      },
    ],
    true
  )
  .then(() => {
    viewer.start();
  });

When I run this code, I see nothing but a black screen with no error messages in the console. Running the same code, but using the OrbitControls instead of the FirstPersonControls works however:

...
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

viewer.controls = new OrbitControls(viewer.camera, viewer.renderer.domElement);
...

How can I any other control than OrbitControls?

[Mark Kellogg]

My first suggestion would not be to assign the controls to the controls property on the viewer object. Just make an external variable. Next, you need to be calling the update() function on the controls with a time delta parameter. Try something like:

let controls;
const clock = new THREE.Clock();
viewer.addSplatScene(path)
.then(() => {
    viewer.start();
    requestAnimationFrame(update);
    controls = new GaussianSplats3D.FirstPersonControls(viewer.camera, viewer.renderer.domElement);
});

function update() {
  requestAnimationFrame(update);
  const delta = clock.getDelta();
  controls.update(delta);
}

[RigoTamas]

Thanks for the quick answer, it's working this way 🙂