x3d - X3DOM 自定义导航

Question

X3DOM 是否有实现自定义相机导航的正确方法？我想在用户拖动缩放滑块时进行缩放，并在用户在屏幕上拖动时进行平移。X3DOM 是否有调用 pan()、zoom() 或 rotate() 函数的 API？

到目前为止，我可以想到三种解决方法，它们不是理想的解决方案：

1. 手动更改视点属性：

   document.getElementById("the_viewpoint").setAttribute("orientation", "some numbers here");

2. <transform>保持视点固定并更改包含整个 3d 世界的 a 的位置/旋转

3. 重新路由事件。例如，当用户滑动缩放滑块时，触发鼠标滚轮事件以进行缩放。

Answer 1

看起来这个功能是最近才添加的，但还没有正确记录

PR 包括这个例子：

var d = function(selector) { return document.querySelector(selector)}

x3dom.runtime.ready = function() {
    var x3d = d('x3d');
    var viewpoint = d('viewpoint');
    var x3dCanvas = x3d.runtime.canvas;

    var _onMouseWheel = x3dCanvas.onMouseWheel;

    x3dCanvas.onMouseWheel = function(event) {
        if(event.altKey) {
            var offset = .01
            var fov = parseFloat(viewpoint.getAttribute('fieldofview')) || 1.571;

            if(event.wheelDelta < 0) offset = -offset;
            fov = Math.min(2, Math.max(0, fov+offset));

            viewpoint.setAttribute('fieldofview', fov)

        } else {
            _onMouseWheel.call(this, event);
        }
    }

    x3dCanvas.canvas.removeEventListener('mousewheel', _onMouseWheel); // unable to unbind when handler is anonymous function 
    x3dCanvas.canvas.addEventListener('mousewheel', x3dCanvas.onMouseWheel);
}