Three.js Transform Controls causes lag

Question

I've added transform controls to a sphere, so it can be moved around my scene. I have also added orbit controls to pan around my scene, which works fine. When the scene is first loaded up there is no lag and it works great, but as soon as I move the sphere, there is significant lag.

I can deal with this, but what I really want to fix is that even once I deselect the sphere and am not moving it anymore, there continues to be lag when just using the orbit controls.

Why does the lag continue even after I am not actively using the transform controls?

var renderer, scene, camera, controls;

init();

var geometry = new THREE.SphereGeometry( .025, 5, 5 );
var material = new THREE.MeshPhongMaterial( {color: 0xffffff} );
var sphere = new THREE.Mesh( geometry, material ); 
addControls(sphere,"translate");
scene.add(sphere);

render();

function addControls(object, type) {

   var transformControl = new THREE.TransformControls( camera,    renderer.domElement );

   transformControl.addEventListener( 'change', render );
   transformControl.addEventListener( 'dragging-changed', function ( event ) {

       controls.enabled = ! event.value;

   } );

   transformControl.attach( object );
   transformControl.setMode( type );
   transformControl.setSpace( "local" );
   scene.add( transformControl );

}

function init() {

   // Renderer
   renderer = new THREE.WebGLRenderer({ antialias: true });
   renderer.setSize(WIDTH, HEIGHT);
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setClearColor(0xffffff);
   document.body.appendChild(renderer.domElement);

   // Camera
   camera = new THREE.PerspectiveCamera(100, WIDTH / HEIGHT, 0.1, 1000);
   camera.position.set(500, 0, 0);

   // Orbit Controls
   controls = new THREE.OrbitControls(camera, renderer.domElement);
   controls.maxDistance = 5;

   // Scene
   scene = new THREE.Scene();

}


function render() {

   renderer.render(scene, camera);
   requestAnimationFrame(render);

}

I have tried removing the transform controls from the scene by placing the following inside addControls():

window.addEventListener( 'keypress', function ( event ) {

   transformControl.detach( object );
   transformControl.dispose();
   scene.remove(transformControl);

} );

After I had moved the sphere around a bit, I would press a key and the transform controls would disappear, but the lag continued. I expected that there may be some lag when moving the sphere, but that this would go away when it was not being moved.

Instead, there continues to be lag even when I am only using orbit controls.

How can I minimize this lag?

Try using chrome devtools (performance) to track down the problem. — 2pha
– 2pha, Commented May 31, 2019 at 22:57

ScieCode · Accepted Answer · 2019-05-31 23:14:23Z

1

Welcome to StackOverflow.

The reason is because you are stacking calls of requestAnimationFrame every time your controls get a change event. You call the render function, which in turn will request that it get called again on every frame update. You can imagine how quickly this blows up. This causes lag even after removing the transform controls.

To fix this behavior, you should decouple your render function from the animate loop.

function animate() {

  requestAnimationFrame( animate );

  render();

}

function render() {

  renderer.render( scene, camera );

}

Now, changes on transform control will only render the scene, not mess with the animation loop.

JSFiddle Example

edited May 31, 2019 at 23:14

answered May 31, 2019 at 23:05

ScieCode

1,74514 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js Transform Controls causes lag

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related