Three.js Transform Controls вызывает задержку - PullRequest
Новая
       45

Three.js Transform Controls вызывает задержку

1 голос
/ 31 мая 2019

Я добавил элементы управления преобразованием в сферу, чтобы ее можно было перемещать по моей сцене. Я также добавил элементы управления орбитой для панорамирования вокруг моей сцены, что прекрасно работает. Когда сцена загружается в первый раз, задержки нет, и она прекрасно работает, но как только я перемещаю сферу, возникает значительная задержка.

Я могу справиться с этим, но что я действительно хочу исправить, так это то, что даже когда я отменяю сферу и больше не перемещаю ее, при использовании элементов управления орбитой сохраняется задержка.

  • Почему задержка продолжается даже после того, как я не активно использую элементы управления преобразованием? 
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);

}

Я попытался удалить элементы управления преобразованием со сцены, поместив в addControls() следующее: 

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

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

} );

После того, как я немного передвинул сферу, я нажимал клавишу, и элементы управления преобразованием исчезали, но отставание продолжалось. Я ожидал, что может быть некоторая задержка при перемещении сферы, но это исчезнет, ​​когда она не будет перемещена.

Вместо этого задержка сохраняется, даже когда я использую только элементы управления орбитой.

  • Как я могу минимизировать это отставание?

1 Ответ

0 голосов
/ 01 июня 2019

Добро пожаловать в StackOverflow.

Причина в том, что вы складываете вызовы requestAnimationFrame каждый раз, когда ваши элементы управления получают событие change. Вы вызываете функцию render, которая, в свою очередь, будет запрашивать повторный вызов при каждом обновлении кадра. Вы можете представить, как быстро это взрывается. Это вызывает отставание даже после удаления элементов управления преобразованием.

Чтобы исправить это поведение, вы должны отделить вашу функцию рендеринга от цикла анимации. 

function animate() {

  requestAnimationFrame( animate );

  render();

}

function render() {

  renderer.render( scene, camera );

}

Теперь изменения в элементе управления преобразованием только визуализируют сцену, но не мешают анимации.

Пример JSFiddle

...