3d 跳跃点的位置与THREEJS场景不同步

我一直在尽我最大的努力来获得RiggedHand网格提供的位置，以便在THREEJS场景中准确地创建小球体。我试着在给定指尖的位置做这个。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.finger[x].tiposition，使用interactionbox并乘以窗口大小以尝试获得准确的位置。我开始怀疑这是否与我在3J中使用透视照相机这一事实有更多的关系，我需要以某种方式补偿它（？）-真的不知道该怎么做，但希望有人能给我指出正确的方向

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

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

var渲染器、场景、摄影机、riggedHandPlugin、fadingSpheres
var sphereTTL=7；
函数initScene（）{
摄像头=新的三个透视摄像头（80，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=200；
场景=新的三个。场景（）；
scene.fog=新的3.FogExp2（0xCCCC，0.002）；
var灯=新的三方向灯（0xffffff）；
光。位置。设置（1，1，1）；
场景。添加（灯光）；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:false}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container=document.getElementById（'container'）；
container.appendChild（renderer.domeElement）；
衰减球=[]；
}
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
if（渐消球）{
fadingSpheres.forEach（移除的球体）；
}
}
功能渐变球体（位置、大小、网格颜色）{
//在indexfinger尖端位置绘制球体
var几何=新的三种。球墨法（3,8,8）；
var material=new THREE.MeshLambertMaterial（{color:meshColor}）；
var mesh=新的三个网格（几何体、材质）；
mesh.material.ambient=mesh.material.color；
mesh.position.x=position.x；
mesh.position.y=position.y；
网格.position.z=位置.z；
这个球体=网格；
scene.add（this.sphere）；
推挤（这个）；
this.ttl=sphereTTL；
this.updateToRemove=函数（）{
这个.ttl--；
return（this.ttl操纵手插件存在一个已知问题：蒙皮网格模型不幸（轻微）出现了问题与Leap Motion API返回的手部数据的比例不同。这意味着对于给定姿势，网格骨骼的尖端和API返回的尖端位置数据将彼此接近，但不同

（在内部，该插件通过计算骨骼之间的正确角度来工作，然后将这些角度提供给THREE.js Skinning API）

您可以通过以下示例实际查看偏移：

这就是您正在经历的吗？我认为，了解这一点，您应该能够获得正确的LM位置，或者视觉上正确的蒙皮网格位置。也有可能通过编程方式对网格进行变形或重新建模，以更准确地拟合LM数据。（请参阅。）多亏了Peter的最后一个示例，终于解决了这个问题。是测试3帮助我找到了问题

问题实际上是，我似乎使用的“场景”（变量名称恰当）与装备手使用的场景不同。我没有意识到它们不同（doh！）。我将其切换为使用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设置了“场景”之后也是如此。我没有意识到leap frame（？）不再需要调用renderer.render

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

更新后的淡出球体代码位于：

再次感谢Peter！
谢谢Peter！我的问题实际上比你的节目更明显。我在这里展示了我的代码示例，你可以从我在手指“尖端”绘制的球体示例中看到网格的位置完全偏离。然而，这是我迄今为止最接近模拟手指点相对于网格的正确位置的一次。我觉得我缺少一些基本的东西；如果我能让球体尽可能接近你的示例中装配的手部网格，我觉得有一些基本的东西使用Leap vs THREEJS时，我失去了心智，如果我能接近你的位置，我会很高兴的！注意，将上面的链接替换为：好吧！riggedHand插件中有一个（其他）错误，导致了“点”我已经发布了0.1.6，并更新了您的示例来演示它。插件本身已经简化为不管理数据转换：原始leap数据应该是可用的，未修改的。-----在这支笔中，我在底部添加了三个测试。1：覆盖装配手的boneHand插件，2：白色球体，3：主循环中的白色球体。----------有些东西仍然在上升，但我认为这可能是你的责任