如何在Three.JS中加载当前鼠标位置的3D模型（JSON）？

Question

我正在尝试实现在当前鼠标坐标上加载3D模型的功能。我使用jQuery拖放功能来加载3D模型。我可以将模型加载到画布中，但它不会捕捉到鼠标坐标。

我使用下面的代码将2D鼠标坐标转换为3D坐标，但它没有提供准确的位置。

function 2DTo3DSpace(event) {
            var planeZ = new THREE.Plane(new THREE.Vector3(1500, 1500, 1500), 0);
            var mv = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
            var raycaster = projector.pickingRay(mv, camera);
            var pos = raycaster.ray.intersectPlane(planeZ);
            return pos;
        }

Answer 1

确保使用相对于画布元素的鼠标位置。

请参阅this主题。