Cannot scale or position object

[alessiogmonti]

Hello,
I'm trying to scale my model and change its position, but its not happening. I used gltfjsx to create this file.

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes } = useGLTF('./mymodel')
  const material = useMemo(() => {
        if (props.layer === DEFAULT_LAYER) return new THREE.MeshStandardMaterial({ color: new THREE.Color('rgba(62,53,105,1)'), roughness: 0.2, metalness: 0.9 })
        else return new THREE.MeshBasicMaterial({ color: new THREE.Color('rgba(52,95,75,1)') })
      }, [props.layer]);
  
  return (
    <group ref={group} dispose={null} position={[0,-500,0]} scale={[0.01, 0.01, 0.01]} {...props}>
      <mesh geometry={nodes.Node.geometry} material={material} 
        layers={props.layer} receiveShadow castShadow />
    </group>
  )
}

export default function App() {
  return (
    <>
      <Canvas camera={{ position: [0, 20, 12], fov: 35, near: 0.1, far: 2000 }} gl={{ antialias: true }} onCreated={state => state.gl.setClearColor( 0xffffff, 0)}>
        <Suspense fallback={null}>    
          <Stage intensity={1}>
            <Model layer = {DEFAULT_LAYER} />
          </Stage>
        </Suspense>
      </Canvas>
      <Loader />
    </>
  )
}

I have placed scale and position in the Model, mesh and group objects but none make a difference. How come? I can't change my camera position either.

My imports for Model.jsx:

import {useRef, useMemo} from 'react'
import { useGLTF } from '@react-three/drei'
import * as THREE from 'three'

My imports for App.jsx:

import React, { Suspense, useRef, useMemo } from 'react'
import { Canvas, useThree, useFrame } from '@react-three/fiber'
import { Loader, useFBO, Stage, Effects, Environment, OrbitControls } from '@react-three/drei'
import Model from './FortunaDraco'
import { FXAAShader } from 'three-stdlib'
import { AdditiveBlendingShader } from './shaders/AdditiveBlendingShader'
import { VolumetricLightShader } from './shaders/VolumetricLightShader'
import './App.css'

I've tried everything I can think of, but no luck- could this be a bug?

[drcmda]

Stage centers the object. I would only use that for testing and staging, but it's not really versatile enough for anything else. Just remove it. Also very easy to re-create a nice looking stage with Environment and ContactShadows.

[drcmda]

ps, the usememo is a bit weird

<mesh geometry={nodes.Node.geometry} layers={props.layer} receiveShadow castShadow>
  {layer === defaultLayer
    ? <meshStandardMaterial ... />
    : <meshBasicMaterial ... />
  }
</mesh>

[alessiogmonti]

@drcmda
Amazing- thank you so much! Missed that- and thanks for the use memo fix- that's much better!

[davidck]

Sorry to re-animate this thread. I just ran into this issue, but I thought adjustCamera=false would've been enough to override this behavior. But looks like it actually centers objects not just the camera? I'll try Environment and ContactShadows but hoped for a boolean flag to turn off the objects centering as well.