X3DOM 自定义导航
X3DOM Custom Navigation
X3DOM 是否有实现自定义相机导航的正确方法?我想在用户拖动缩放滑块时进行缩放,而在用户在屏幕上拖动时进行平移。 X3DOM 是否有 API 用于调用 pan()、zoom() 或 rotate() 函数?
到目前为止,我能想到三种解决方法,但都不是理想的解决方案:
手动更改视点属性:
document.getElementById("the_viewpoint").setAttribute("orientation", "some numbers here");
固定视点,改变<transform>
的position/rotation,包含整个3d世界
重新安排活动。例如,当用户滑动缩放滑块时,触发鼠标滚轮事件进行缩放。
看起来像this functionality was added fairly recently, but has yet to be properly documented
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);
}
X3DOM 是否有实现自定义相机导航的正确方法?我想在用户拖动缩放滑块时进行缩放,而在用户在屏幕上拖动时进行平移。 X3DOM 是否有 API 用于调用 pan()、zoom() 或 rotate() 函数?
到目前为止,我能想到三种解决方法,但都不是理想的解决方案:
手动更改视点属性:
document.getElementById("the_viewpoint").setAttribute("orientation", "some numbers here");
固定视点,改变
<transform>
的position/rotation,包含整个3d世界重新安排活动。例如,当用户滑动缩放滑块时,触发鼠标滚轮事件进行缩放。
看起来像this functionality was added fairly recently, but has yet to be properly documented
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);
}