Question/help about responsive canvas / locking object on canvas regardless of window size

[stejul]

Hi!

I have a issue, where I can't lock the object when i resize the window. Is there a way to lock it permanently to this position regardless of window size?

Page with loaded model

import React, { Suspense } from 'react';
import { Canvas } from 'react-three-fiber';
import { darkTheme } from '@styles/Themes';
import { Hero, HeroTitle, HeroDescription } from '@styles/Hero';
import ModelObject from '@components/Model';

export default function Model() {
  return (
    <>
      <Hero theme={darkTheme}>
        <HeroTitle theme={ darkTheme }>
         TEXT TEXT 
        </HeroTitle>
        <HeroDescription theme={ darkTheme }>
          Lorem Ipsum
        </HeroDescription>
        <Canvas style={{ background: darkTheme.background }}>
          <Lights />
          <Suspense fallback={null}>
            <ModelObject />
          </Suspense>
        </Canvas>
      </Hero>
    </>
  );
}

const Lights = () => (
  <>
    {/* Ambient Light illuminates lights for all objects */}
    <ambientLight intensity={0.3} />
    {/* Diretion light */}
    <directionalLight position={[10, 10, 5]} intensity={1} />
    <directionalLight
      castShadow
      position={[0, 10, 0]}
      intensity={1.5}
      shadow-mapSize-width={1024}
      shadow-mapSize-height={1024}
      shadow-camera-far={50}
      shadow-camera-left={-10}
      shadow-camera-right={10}
      shadow-camera-top={10}
      shadow-camera-bottom={-10}
    />
    {/* Spotlight Large overhead light */}
    <spotLight intensity={1} position={[1000, 0, 0]} castShadow />
  </>
);

Model generated with gltfjsx

/*
auto-generated by: https://github.com/pmndrs/gltfjsx
*/
import React, { useRef } from 'react';
import { useGLTF } from '@react-three/drei/useGLTF';

export default function ModelObject(props) {
  const group = useRef();
  const { nodes, materials } = useGLTF('/models/model.glb');
  return (
    <group ref={group} {...props} dispose={null}>
      <group
        position={[5, -4, 0]}
        rotation={[0, 0.09, 0.45]}
        scale={[0.08, 0.08, 0.08]}
      >
        <primitive object={nodes.Bone} />
        <skinnedMesh
          material={materials['Material.001']}
          geometry={nodes.dummy_obj.geometry}
          skeleton={nodes.dummy_obj.skeleton}
        />
      </group>
    </group>
  );
}

useGLTF.preload('/models/model.glb');

[drcmda]

well its all just math. useThree gives you viewport and size. size is the window width/height. viewport is the same but in three units, as in viewport.width fills the entire width of the canvas. three doesnt work like the dom, three is centred. 0/0 is in the middle. that's why you need to compensate.