AndrewPrifer
commented
3 years ago Hi @hector-crean, sorry for getting back to you so late!
The reason the above code doesn't work is that editable needs a ref to the wrapped object, and the component generated by GLTFJSX doesn't forward it to the group. I opened an issue in GLTFJSX, however in the meantime, you can forward the ref yourself: https://reactjs.org/docs/forwarding-refs.html.
Update
Since the requirement to use forwardRef will be removed in React 18, GLTFJSX doesn't plan to use forwardRef, so you'll need to do it by hand in the meantime. Feel free to @ me if you need help with it.
hector-crean
Love react-three editable. As noted in the documentation, it solves some of the same problems that GLTSFX was trying to solve, but with a different approach. I'm finding it difficult to integrate the use of react-three-edtiable with GLTSFX. As far as I'm aware, you're able to make custom components editable, by wrapping them in editable, but I'm running into problems with this. Any best practice way to do this?
`/* ////Model.tsx
Auto-generated by: https://github.com/pmndrs/gltfjsx */
import * as THREE from 'three' import React, { useRef } from 'react' import { useGLTF } from '@react-three/drei/useGLTF'
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
type GLTFResult = GLTF & { nodes: {
} materials: {
} }
export default function Model(props: JSX.IntrinsicElements['group']) { const group = useRef()
const { nodes, materials } = useGLTF('/A1.glb') as GLTFResult
return (
<group ref={group} {...props} dispose={null}>
) }
useGLTF.preload('/A1.glb')`
` //App.tsx import { editable as e } from 'react-three-editable';
import Model from './path/to/Model.tsx'
const EModel = e(Model, 'group'); <EModel uniqueName={'Emodel'} />
`