跳跃点与三维场景不同步的位置

Question

我一直在尽我最大的努力获得RiggedHand网格所呈现的位置，以便在三重网格场景中准确地创建小球体。我试着在给定的指尖位置做这件事。X和Y似乎是对的，但Z几乎总是关闭的。更重要的是，离中心越远，偏斜就更明显(也就是X和Y也离开了)。

我所能做的最好的就是使用以下代码计算出“正确”的坐标：

var handMesh = hand.data('riggedHand.mesh'); 
//This is the best I've gotten so far with the position of the fingertip
var position = handMesh.fingers[1].tip.getWorldPosition();

不太确定做这件事的最佳方法是什么，但我已经尝试过几种了。转换hand.fingerx.tipPosition，使用交互框并乘以窗口大小来获得精确的位置。我开始怀疑，这是否与我在THREEJS中使用PerspectiveCamera以及我需要对其进行补偿这一事实有更多的关系--我真的不知道该怎么做，但希望有人能为我指明正确的方向。

使用上述代码的完整示例代码片段如下所示：

    var renderer, scene, camera, riggedHandPlugin, fadingSpheres
    var sphereTTL = 7;

    function initScene() {
        camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 200;
        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0xcccccc, 0.002);

        var light = new THREE.DirectionalLight(0xffffff);
        light.position.set(1, 1, 1);
        scene.add(light);

        // renderer
        renderer = new THREE.WebGLRenderer({ antialias: false });

        renderer.setSize(window.innerWidth, window.innerHeight);

        container = document.getElementById('container');
        container.appendChild(renderer.domElement);

        fadingSpheres = [];
    }

    function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
        if (fadingSpheres) {
            fadingSpheres.forEach(removeDeadSpheres);
        }
    }

    function FadingSphere(position, size, meshColor) {
        //Draw the sphere at the position of the indexfinger tip position
        var geometry = new THREE.SphereGeometry(3, 8, 8);
        var material = new THREE.MeshLambertMaterial({ color: meshColor});

        var mesh = new THREE.Mesh(geometry, material);

        mesh.material.ambient = mesh.material.color;

        mesh.position.x = position.x;
        mesh.position.y = position.y;
        mesh.position.z = position.z;

        this.sphere = mesh;

        scene.add(this.sphere);
        fadingSpheres.push(this);

        this.ttl = sphereTTL;
        this.updateToRemove = function () {
            this.ttl--;
            return (this.ttl <= 0);
        }
    }

    function removeDeadSpheres(fadingSphere, number, array) {
        if (fadingSphere) {
            if (fadingSphere.updateToRemove()) {
                scene.remove(fadingSphere.sphere);
                var index = array.indexOf(fadingSphere);
                array.splice(index, 1);
            }
        }
    }

    //Within the leap draw loop
    //Leap loop to call drawing functions
    Leap.loop(
      function (frame) {
          frame.hands.forEach(
            function (hand) {
                var handMesh = hand.data('riggedHand.mesh');

                function createSphereAtFingerTip(fingerIndex, colorHex) {
                    new FadingSphere(handMesh.fingers[fingerIndex].tip.getWorldPosition(), 3, colorHex);
                }

                createSphereAtFingerTip(0, 0xF57E20) //Thumb
                createSphereAtFingerTip(1, 0xFFCC00) //Index
                createSphereAtFingerTip(2, 0xCCCC51) //Middle
                createSphereAtFingerTip(3, 0x8FB258) //Ring
                createSphereAtFingerTip(4, 0x336699) //pinky
            }
       )
      }
    )
    .use('riggedHand')
    .use('handEntry')

    riggedHandPlugin = Leap.loopController.plugins.riggedHand;

    initScene();
    render();

如有任何可能有用的建议或建议，将不胜感激。

Answer 1

最后，多亏了Peter的最后一个例子，才把它修复了。正是测试3帮助我发现了这个问题。

实际上，问题是，我似乎使用的是一个不同的“场景”(变量恰当的名称)，而不是被操纵的手所使用的场景。我没有意识到他们是不同的(啊！)我将其转换为使用riggedHand.parent作为“场景”，而不是我在initScene()中手动创建的场景实例，该实例现在具有一个参数，在第一次可用时，它将在riggedHand.parent中作为场景传递给它。

function initScene(basisScene) {
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, sceneArea / 100,
      sceneArea * 4);
    camera.position.z = sceneArea;
    scene = basisScene;

另一件事是不要调用renderer.render(场景、摄像机)；在render()循环中--即使在从riggedHand.parent设置“场景”之后。我没有意识到飞跃框架(？)这样就不必再打电话给renderer.render了。

    function render() {
        //Next line no longer needed:
        //renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

更新后的带有衰落球的代码位于：http://codepen.io/GMelencio/pen/EaWqjZ

再次感谢彼得！

Answer 2

手工插件有一个已知的问题:不幸的是，蒙皮网格模型与Leap返回的手数据所占的比例略有不同。这意味着对于给定的姿势，网格的尖端和由API返回的尖端位置数据将彼此接近，但不同。

(在内部，该插件通过计算从骨到骨的正确角度来工作，然后将其输入到THREE.js剥皮API)

实际上，您可以使用下面的示例查看偏移量：http://leapmotion.github.io/leapjs-rigged-hand/?dots=1

这就是你所经历的吗？我认为知道这一点，你应该能够得到正确的LM位置，或视觉上正确的蒙皮网格位置。网格也有可能以编程方式变形，或重新构造，以更准确地适应LM数据。(参见创建被操纵的手维基。)