Выпуск OrbitControls в threejs

Question

У меня есть приложение с одной страницей, в котором много вещей, используя durandal. На одной странице у меня есть ссылка, которая ведет к другой странице, где отображается 3D-модель. OrbitControls используются, чтобы сделать поворот модели и т. Д. Это забирает мой левый клик по умолчанию и правый щелчок. После того, как вы оставите эту страницу, она по-прежнему поддерживает привязки мыши, а мой левый клик и правый щелчок становятся бесполезными для некоторых видов использования, таких как: выбор тега, означающий, что входные теги не могут быть снова доступны.

Я мог бы освободить привязки и сбросить их, если бы знал, как это сделать. Существует функция деактивации, которая вызывается, когда это 3d-окно закрывается, но я не знаю, какой кусок кода писать там. Любая помощь была бы чрезвычайно полезна. Я сомневаюсь, что любой код будет полезен, поэтому я не стану его использовать.

Спасибо!

Благодаря запросу, здесь упрощено ViewModel:

define(['services/logger'], function (logger) { 
    var vm = { 
     attached: attached 
    }; 
    return vm; 
    function attached(view) { 
     var camera, cameraTarget, scene, renderer, controls; 
     init(); 
     animate(); 
     function init() { 
      ... 
      controls = new THREE.OrbitControls(camera); 
      ... 
     } 
     function animate(){...} 
     function render(){...} 
    } 
} 

View является чрезвычайно сложным, но вставили здесь в полном объеме:

<div id="canvasDiv" style="overflow: hidden; width:100%; height:100%"> 
</div> 

Answer 1

На самом деле, это, вероятно, будет полезно включить ваш код setup OrbitControls (я не знаком с ним).

Лучший подход к этой проблеме, вероятно, заключался бы в написании пользовательской привязки Knockout (google, если вы не знаете их). Пользовательская привязка - отличное место для абстрагирования манипуляций с DOM, в вашем случае для создания OrbitControls.

Предположим, что у вас есть div, на котором вы создали OrbitControls. Вы могли бы сделать что-то вроде следующего:

HTML:

<div data-bind="myOrbitControlsBinding: { someSetting: true; someOtherSetting: false }"></div> 

JavaScript:

ko.bindingHandlers.myOrbitControlsBinding = { 
    init: function (element, valueAccessor) { 
     var settings = ko.utils.unwrapObservable(valueAccessor()); 
     setupOrbitControlsOnElement(element, settings); // This should be your setup code for OrbitControls 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      // Here, you should unbind the event handlers for mouse clicks. How you do this depends on how OrbitControls sets them up. Please refer to their documentation for this. Maybe there is a generic dispose function? 
      disposeOrbitControls(element); 
     }); 
    } 
} 

Edit: Ах, я не понял, вы используете три. Я быстро просмотрел их документацию, чтобы узнать, используют ли они какой-то модуль ввода, который захватывает события. Они не кажутся. Что, вероятно, означает, что некоторые, где в вашем коде, есть ключевое слово «addEventListener» (его поиск). Это произойдет там, где происходят события.

У вашего вида, вероятно, есть прикрепленная к нему модель, поскольку вы используете дюрандал. Внутри viewmodel добавьте метод «деактивировать» (и верните его). В этом методе вам нужно снова удалить прослушиватель событий. Вы, наверное, уже догадались об этом, но этот метод называется removeEventListener (см. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener для объяснения)

Я по-прежнему настоятельно рекомендую создать пользовательскую привязку для установки три. Это даст вам гораздо больший контроль над созданием/удалением, чем вы могли бы иметь сейчас. Если вы этого не хотите, убедитесь, что три инициализируются внутри модели просмотра, в методе активации.

Сообщите мне, если это помогло, в противном случае был бы полезен какой-либо код модели/трех init.