After adding transform controls to a sphere in my scene to enable movement, I also included orbit controls for panning around. Initially, everything worked smoothly without any lag. However, once I started moving the sphere, significant lag became apparent. Even after deselecting the sphere and no longer actively moving it, the lag persisted when using orbit controls alone.
- Why does the lag persist even after ceasing to use 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);
}
In an attempt to eliminate the lag, I experimented with removing the transform controls from the scene by incorporating the following within addControls():
window.addEventListener( 'keypress', function ( event ) {
transformControl.detach( object );
transformControl.dispose();
scene.remove(transformControl);
} );
Despite successfully removing the transform controls after moving the sphere, the lag persisted. My expectation was that while there might be lag during movement, it would dissipate when the object was stationary. However, the lag continued even when solely utilizing orbit controls.
How can I mitigate or reduce this persistent lag issue?
- How can I minimize this lag?