Three.js & Dat.gui - TrackballControls renderer.domElement отключает поворот и панорамирование

Question

Я пытаюсь использовать dat.gui с очень простой сценой three.js (r73), но сталкиваюсь с проблемой, когда вращение и панорамирование не работают после добавления "renderer.domElement" в инициализацию trackballControls. Зум работает как положено.

Без renderer.domElement я получаю работающие функции поворота, масштабирования и панорамирования, но ползунки интерфейса dat.gui "защелкиваются" при нажатии, что просто раздражает и не работает. Проблема, как описано здесь: Проблема при использовании dat.GUI в примере three.js.

Просматривал больше информации здесь, но не видел большого разрешения: https://github.com/mrdoob/three.js/issues/828

Также нашел эту проблему. Определение элемента контейнера aka renderer.domElement не работает. Я не могу щелкнуть за пределами области холста без поворота сцены. Разрешить управление мышью сцены three.js только тогда, когда мышь находится над холстом

Кто-нибудь сталкивался с тем же самым в последнее время? Если да, то какие обходные пути возможны? Любая помощь приветствуется.

-

Код настроен следующим образом:

// setup scene
// setup camera
// setup renderer
// ..

var trackballControls = new THREE.TrackballControls(camera, renderer.domElement);
trackballControls.rotateSpeed = 3.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;

// ..

// render loop

var clock = new THREE.Clock();

function render() {
  stats.update();
  var delta = clock.getDelta();
  trackballControls.update(delta);

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

Answer 1

Я отладил проблему с помощью этого поста: Three.js Ограничить движение мыши только сценой.

Очевидно, что если вы добавляете дочерний элемент renderer.domElement после инициализации trackballControls, он ничего не знает об объекте renderer.domElement. Это также делает что-то странное для dat.gui, как описано ранее.

В основном, убедитесь, что эта строка:

document.getElementById("WebGL-output").appendChild(renderer.domElement);

появляется перед этой строкой:

var trackballControls = new THREE.TrackballControls(camera, renderer.domElement);

Answer 2

Убедитесь, что элемент DOM рендерера добавлен в HTML, прежде чем он будет использоваться в качестве ссылки.

document.body.appendChild(renderer.domElement);