React-three-fiber: TransformControls Example

[yonigo]

Hey,

any chance to get a working TransformControls Example?

I'm trying to implement this: https://threejs.org/examples/misc_controls_transform.html
but am not able to make it work.

Thanks.

[drcmda]

you use it the same way you'd otherwise use it in three: https://codesandbox.io/s/react-three-fiber-react-spring-30lfq

but there was something weird, it looks like to me like it needs to be attached to an object before it reaches the scene. that would be a pretty strange limitation if true. i've solved it by using useResource here.

[BeamupAI]

Hey, it seems that this does not work when setting mode to rotate:
https://codesandbox.io/s/react-three-fiber-react-spring-9nnqh.

[drcmda]

must be an issue with the jsm control then. i've just had one with orbitcontrols, they're new and machine translated i think, some aren't functioning correctly. you can make a raw threejs sandbox and if you get the same behaviour open an issue on the threejs github. they fixed my issue in just a week.

[BeamupAI]

It seems to work with raw three.js:

https://codesandbox.io/s/hardcore-shaw-1rmhv

Can this be somehow related?
https://discourse.threejs.org/t/transformcontrols-rotation-is-not-working/7519

Edit:

I checked the source code, and indeed this part:

if (this.camera instanceof PerspectiveCamera) {
eye.copy(cameraPosition).sub(worldPosition).normalize();
} else if (this.camera instanceof OrthographicCamera) {
eye.copy(cameraPosition).normalize();
}

returns false for both cases even though camera is a OrthographicCamera

[drcmda]

interesting, do you know how to solve it? i don't understand how instanceof OrthographicCamera can be false if the cam is orthographic 😐

[drcmda]

has this started working in three 108 or something? i updated the sandbox and it seems to move: https://codesandbox.io/s/react-three-fiber-react-spring-bwdts

[drcmda]

im closing this for now, if something new comes up you can ping me here

[jean-noelp]

This code works for me:

    import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
    ...
    const { camera, gl, scene } = useThree();
    const meshRef = useRef<Mesh>();
    const [transformControl, setTControl] = useState<TransformControls | undefined>();

    // Instantiate the TransformController: this is a hack, because
    // this tool takes part of three/examples, and is not stable in react-three-fiber version
    useEffect(() => {
        if (!transformControl && meshRef.current) {
            let transformC = new TransformControls(camera, gl.domElement);
            transformC.attach(meshRef.current);

            scene.add(transformC);
            setTControl(transformC);
        }

        return () => {
            if (transformControl) {
                scene.remove(transformControl);
                setTControl(undefined);
            }
        };
    }, [transformControl, camera, scene, gl]);

    return (
        <mesh
            ref={meshRef}
            ...
        / >
    );

[drcmda]

here's a full example as well: https://codesandbox.io/s/react-three-fiber-gestures-hc8gm