在THREE.js对象上以光标位置为中心缩放。

Question

我目前正在进行一个 THREE.js 项目，但是在缩放对象时遇到了问题。使用 trackball controls 时，它基于渲染的中心位置进行缩放，但我想根据鼠标光标位置进行缩放。我尝试使用 controls.noZoom=true 禁用 trackball controls 下的缩放，并在 mousewheel 下编写了一段代码。结果还不错，但只能放大无法缩小。

mousewheel = function (event) {
    event.preventDefault();
    event.stopPropagation();
            var factor = 15;
            var mX = (event.clientX / jQuery(container).width()) * 2 - 1;
            var mY = -(event.clientY / jQuery(container).height()) * 2 + 1;         
            var vector = new THREE.Vector3(mX, mY, 0.5);
            zoomstart = vector.unproject(camera);
            vector.sub(camera.position);
            camera.position.addVectors(camera.position, vector.setLength(factor));
            trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
 };

帮我处理这段代码，使其能够根据鼠标位置进行缩放。

- Aasha joney

---

我已经找到了解决方案。 - Aasha joney

Answer 1

我想出了解决方案，它非常有效。

var camera = new THREE.PerspectiveCamera(45, container.offsetWidth / 
              container.offsetHeight, 1, 100000);
camera.position.set(0, 0, 40);

var trackBallControls= new THREE.TrackballControls(webGl.cameraP, container);
    trackBallControls.rotateSpeed = 2.0;
    trackBallControls.zoomSpeed = 3.0;
    trackBallControls.panSpeed = 2.0;
    trackBallControls.dynamicDampingFactor = 0.3;
    trackBallControls.minDistance = 300;
    trackBallControls.maxDistance = 4000;
    trackBallControls.noZoom = false;
    trackBallControls.noRotate = false;
    trackBallControls.noPan = false;
    trackBallControls.staticMoving = true;
    trackBallControls.enabled = true;

mousewheel = function (event) {
                var factor = 15;
                var mX = (event.clientX / jQuery(container).width()) * 2 - 1;
                var mY = -(event.clientY / jQuery(container).height()) * 2 + 1;
                var vector = new THREE.Vector3(mX, mY, 0.1);

                vector.unproject(camera);
                vector.sub(camera.position);
                if (event.deltaY < 0) {
                    camera.position.addVectors(camera.position, vector.setLength(factor));
                    trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
                } else {
                    camera.position.subVectors(camera.position, vector.setLength(factor));
                    trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor));
                }
    };

- Aasha joney

---

嗨。我正在尝试实现与您相同的事情。在使用您的代码时，我遇到了一些错误，并且有一些问题需要向您请教。camera是您预定义的摄像机变量吗？它在一个单独的js文件中吗？trackBallControls是您的轨迹球控制变量的名称，也在一个单独的js文件中吗？我假设是这样的，但我只是想确认一下。谢谢。 - PerrinPrograms

相机变量和轨迹球控制变量是同一文件中的变量。我已经为您编辑了答案。 - Aasha joney