Question

在three.js中，我怎么知道相机已经摇摄了多少？

当我使用orbitControls摇摄相机时，我需要在three.js画布上方保持与3D对象对齐的SVG层。

我将svg-pan-zoom用于SVG图层，它非常适合缩放。

对于平移，我目前使用'change'事件，并按照以下方式相应地跟踪摄像机（省略了SVG和three.js设置）：

var unproject = function(vector3d, transform) {
    var app = this.app;

    var v = vector3d.clone();
    v.project( app.three.camera );

    v.x = Math.round( (   v.x + 1 ) * three_element.offsetWidth  / 2 );
    v.y = Math.round( ( - v.y + 1 ) * three_element.offsetHeight / 2 );
    v.z = 0;

    if (transform) {
    var matrix = svg.node.getCTM().inverse()
    var p =      svg.node.createSVGPoint()
    p.x = v.x; p.y = v.y
    p = p.matrixTransform(matrix)
    v.x = p.x
    v.y = p.y
    }
    return v;
}

var panBy = function(d){ panZoom.panBy(d) };

var controls = new THREE.OrbitControls( camera, document.getElementById('canvas') );

var ref = unproject(new THREE.Vector3(0, 0, 0));

controls.addEventListener( 'change', function(e) {
    var curr = unproject(new THREE.Vector3(0, 0, 0))
    var dist = curr.clone().sub(ref)
    panBy(dist)
    ref = curr;
} );

但是很明显，SVG平移滞后于3D窗口平移。有更好的方法吗？

我如何获得在three.js中摇摄的相机数量

0 个答案: