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(){...}
     }
}

视图非常复杂，但完全粘贴在这里：

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

Answer 1

实际上，包含你的代码来设置OrbitControls可能会有所帮助（我不熟悉它）。

解决这个问题的最佳方法可能是编写一个Knockout自定义绑定（谷歌，如果你不知道它们）。在您设置OrbitControls的情况下，自定义绑定是抽象DOM操作的好地方。

假设您有一个设置OrbitControls的div。然后，您可以执行以下操作：

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);
        });
    }
}

修改啊，我没有意识到你使用三。我已经快速扫描了他们的文档，看看他们是否使用某种捕获事件的输入模块。他们似乎没有。这可能意味着代码中的某些位置存在关键字“addEventListener”（搜索它）。这将是事件被捕获的地方。

您的视图可能有一个视图模型，因为您正在使用durandal。在viewmodel中，添加'deactivate'方法（并返回它）。在此方法中，您需要再次删除事件侦听器。您可能已经猜到了，但该方法名为removeEventListener（有关解释，请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener）

我仍然强烈建议你创建一个自定义绑定来设置Three。这将使您比现在拥有更多的创建/删除控制权。如果您不想这样做，请确保在viewmodel中也在activate方法中初始化Three。

如果有帮助，请告诉我，否则一些viewmodel / three init代码会有所帮助。

在threejs中释放OrbitControls

1 个答案: