Transform control increasing frames

Questions
,
1

Hi there, I am confused a bit when I attach and add transform control into one of my scene the frame starts to rise up to 400s or 500s and make the scene insanely laggy.

2

Likely unrelated to transform controls themselves and more likely caused by something else being triggered in the code. But hard to say without seeing related code.

1 Like
3

this is my code that is using the transform controls:

function loadLeePerrySmith() {
  const loader = new GLTFLoader();

  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/examples/jsm/libs/draco/");
  loader.setDRACOLoader(dracoLoader);

  loader.load(
    "https://cdn.glitch.me/dc99a522-a347-4f3e-a04f-210e55dccd91/Tall%20Base%201.glb?v=1709712049776c",
    function (gltf) {
      result = gltf.scene.children[0];

      let resultMaterial = new THREE.MeshPhongMaterial({
        specular: 0x111111,
        shininess: 5,
        side: THREE.DoubleSide,
        alphaToCoverage: true,
        stencilWrite: true,
        stencilRef: 0,
        vertexColors: true,
      });

      result.material = resultMaterial.clone();

      meshBrush = new tbc.Operation(result.geometry, resultMaterial);
      {
        inside = new tbc.Operation(
          new THREE.BoxGeometry(10, 10, 10),
          resultMaterial
        );
        meshBrush.add(inside);
        inside.operation = tbc.ADDITION;
        newcontrol.attach(inside)
        scene.add(newcontrol)
      }

      mesh = csgEvaluator.evaluateHierarchy(meshBrush);
      {
        const colorArray = new Uint8Array(
          mesh.geometry.attributes.position.count * 3
        );
        colorArray.fill(255);
        const colorAttr = new THREE.BufferAttribute(colorArray, 3, true);
        colorAttr.setUsage(THREE.DynamicDrawUsage);
        mesh.geometry.setAttribute("color", colorAttr);

        mesh.geometry.boundsTree = mesh.geometry.computeBoundsTree();

        //Center the model
        mesh.scale.set(1, 1, 1);
        let bounds = new THREE.Box3();
        bounds.setFromObject(mesh);
        mesh.position.sub(bounds.getCenter(new THREE.Vector3()));
        mesh.updateMatrixWorld(true);
        //Scale model to 100

        bounds = new THREE.Box3().setFromObject(mesh);
        let size = bounds.getSize(new THREE.Vector3());
        let { max } = Math;
        let maxsz = max(size.x, max(size.y, size.z));
        mesh.scale.multiplyScalar(1 / maxsz);
        mesh.needsAutoUpdate = true;
        bounds.setFromObject(mesh);
        mesh.position.sub(bounds.getCenter(new THREE.Vector3()));
      }
      mesh.material = result.material.clone();
      mesh.geometry.computeBoundingBox();
      scene.add(point);
      point.add(mesh);
    }
  );
}
4

Anything you find in the code that is making the transform controls laggy?

5

I’m not seeing where you are doing mesh.computeBoundsTree anywhere… if you don’t computeBoundsTree on your meshes, the raycaster will fall back to testing every triangle against rays, instead of using BVH, which might be why you’re slowing down? just a random guess…