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

Question

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

Без renderer.domElement, я получаю рабочий поворот, масштабирование, панорамирование, но ползунки интерфейса dat.gui «защелки» при нажатии, что просто раздражает и не работает. Проблема, описанная здесь: Issue while using dat.GUI in a three.js example.

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

найденную Также этот вопрос. Определение элемента контейнера aka renderer.domElement не работает. Я не могу щелкнуть внутри области холста без поворота сцены. Allow mouse control of three.js scene only when mouse is over canvas

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

-

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

// 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 Restrict the mouse movement to Scene only.

По-видимому, если вы добавили дочерний элемент 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);