Transform Control Does not add to the scene like before

Questions
1

Hi. I had used the previous version of transform control which was ok. But now the new version is not ok and I can not add transform control to the scene. Do you know how to solve it?

 const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        sceneRef.current.add(cube);


        // TransformControls with ref for easy access
        const transformControls = new TransformControls(cameraRef.current, renderer.current.domElement);
        transformControls.attach(cube);
        sceneRef.current.add(transformControls);

        // Save transformControls to ref
        transformControlRef.current = transformControls;

this line has error >> sceneRef.current.add(transformControls); . THREE.Object3D.add: object not an instance of THREE.Object3D.

2

I have tested these 2 imports :slight_smile:

import { TransformControls } from 'three/addons/controls/TransformControls.js';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls';```
3

TransformControls must be added to the scene in a different way since r169. This is noted in the migration guide (see Migration Guide · mrdoob/three.js Wiki · GitHub).

Instead of:

sceneRef.current.add(transformControls);

Try it with:

sceneRef.current.add(transformControls.getHelper());

TransformControls is now derived from the abstract Controls class like all other controls. It is no 3D object anymore.

2 Likes
4

yes
thanks