Estoy tratando de usar dat.gui en mi proyecto con react-three-fiber. Tengo un componente personalizado llamado Cube que encapsula una malla como esta:

 import React from "react"; class Cube extends React.Component { constructor(props) { super(props); this.state = { position: props.position, } } componentDidUpdate(prevProps){ if(prevProps.position[0] !== this.state.position[0]){ console.log("update"); this.setState({ position: this.props.position, }); } } render() { return( <mesh position={this.state.position} onUpdate={()=>{console.log("mesh")}} > <boxGeometry attach="geometry" args={[0.5,0.5,0.5]}/> <meshStandardMaterial attach="material" color="#ff0000"/> </mesh> ) } } export default Cube;

Pero cuando cambio la propiedad de posición de mi componente Cube en mi App.js principal (usando dat.gui), la propiedad y el estado del componente principal se actualizan (lo he visto depurar) pero parece que la malla secundaria es sin actualizar su posición.

Contenido de la aplicación.js:

 import { OrbitControls } from "@react-three/drei"; import { Canvas } from '@react-three/fiber'; import * as dat from 'dat.gui'; import { useEffect, useRef } from 'react'; import './App.css'; import Lights from './components/Lights'; import Cube from './components/Cube'; function App() { const cube = useRef(); useEffect(() => { const gui = new dat.GUI({ width: 400 }); const debugObject = { position: { x: 0, y: 0, z: 0, } } console.log(debugObject.position.x) gui.add(debugObject.position, "x") .min(-10) .max(10) .step(0.1) .onChange(() => { console.log(cube.current) cube.current.props.position[0] = debugObject.position.x; console.log(debugObject.position.x) console.log(cube.current) }); return () => { gui.destroy() } }); return ( <div className="App"> <Canvas camera={{ fov: 75, aspect: 2, near: 0.1, far: 1000, position: [0,0,20], rotation: [0,0,0] }} > <color attach="background" args={["#161c24"]}/> <Lights/> <Cube ref={cube} position={[0,0,0]}/> <OrbitControls/> </Canvas> </div> ); } export default App;

Lo siento si me estoy perdiendo algo obvio, estoy comenzando con esta biblioteca.