Cannot use Transform Controls with Stage

AkshayshettyS commented 1 year ago

three version: 0.153.0
@react-three/fiber version: 8.13.3
@react-three/drei version: 9.77.1
node version: 16.15.1
npm (or yarn) version: 1.22.19 (yarn)

Problem description:

When I try to use TransformControls I am getting error saying "Cannot read properties of undefined (reading 'clone')". This is causing in "TransformControlsGizmo.updateMatrixWorld" of the imported "three-stdlib" file.

Relevant code:

My code:

<TransformControls mode="translate">
  <mesh>
     <primitive object={cube} />
  </mesh>
</TransformControls>

Even assigning as object prop in TransformControls still getting the same error.

The line causing the error is

handle.material.tempColor = handle.material.tempColor || handle.material.color.clone()

Here its not getting the color in the material causing the error. Not sure if I am doing anything wrong. Need some suggestions here.

EDIT: Upon further digging I found out that this is happening when there is a "Stage" element with "adjustCamera" value given in the Canvas. When I remove the "adjustCamera" props in Stage element everything works as expected.

cyango commented 11 months ago

Happens to me too.

"@react-three/drei": "^9.56.27",
"@react-three/fiber": "^8.14.5",

estebanba commented 10 months ago

Same here. Did you manage to fix it?

"@react-three/drei": "^9.77.4", "@react-three/fiber": "^8.13.0",

AkshayshettyS commented 10 months ago

Same here. Did you manage to fix it?

"@react-three/drei": "^9.77.4", "@react-three/fiber": "^8.13.0",

No I used PivotControls instead for now.

cyango commented 10 months ago

I managed to fix it by re-adapting the Stage component and remove the Bounds Refit and Center components. https://github.com/pmndrs/drei/blob/master/src/core/Stage.tsx

pmndrs / drei