How to optimize model scaling and position using ARCanvas?

[sljavi]

Hello!

I have a big gltf model that I'm downscaling as the code below shows.
The problem I have is that when seeing it using ARCanvas, it gets super big through the camera.
What's the best way to optimize the model size and its position? How can I allow the user to do it using their fingers?

Thanks! Awesome library

import { Canvas } from '@react-three/fiber';
import { VRCanvas, ARCanvas } from '@react-three/xr';
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
import { Suspense, useState } from 'react';
import './App.css';

const Model = () => {
  const gltf = useLoader(GLTFLoader, '/house/house.glb');
  return (
    <>
      <primitive object={gltf.scene} scale={scale} />
    </>
  );
};


function App() {
  const [camera, setCamera] = useState({
    name: 'front',
    ...views.front,
  });

  const changeCamera = (viewName) => {
    setCamera({
      name: viewName,
      ...views[viewName],
    });
  }

  return (
    <div className="App">
      <div id="canvas-container">
        <ARCanvas frameloop="demand">
          <ambientLight intensity={0.1} />
          <directionalLight color="white" position={[0, 0, 5]} intensity={0.5} />
          <directionalLight color="white" position={[0, 0, -5]} intensity={0.5} />
          <directionalLight color="white" position={[-5, 0, 0]} intensity={0.1} />
          <directionalLight color="white" position={[5, 0, 0]} intensity={0.1} />
          <PerspectiveCamera makeDefault position={camera.position} />
          <Suspense fallback={null}>
            <Model />
            <OrbitControls
              enableZoom={true}
              enableRotate={true}
              enableDamping={false} 
              target={camera.target}
              maxDistance={camera.maxDistance}
              maxPolarAngle={camera.maxPolarAngle}
            />
            <mesh position={[0, 0.5, 0]} visible={false}>
              <boxGeometry args={[0.3, 0.3, 0.3]} />
              <meshStandardMaterial />
            </mesh>
          </Suspense>
        </ARCanvas>
      </div>
    </div>
  );
}

[edwinwebb]

You can write an useEffect which takes isPresenting from the useXR() hook and then setup/optimize your scene between the sessions.

Finger control is more difficult. You will need to roll your own handlers for the touch events, ray casting as well as hit-tests.