three.js - 根据鼠标滚轮中光标的位置进行缩放

Question

我目前正在研究一个 THREE.js 项目。虽然使用轨迹球控制缩放，但它是相对于模型中心进行缩放的。但我想根据鼠标滚轮光标的位置进行缩放。任何熟悉的人请帮助我在这个。
先感谢您。

Answer 1

在鼠标滚轮中添加此代码可帮助您根据光标位置而不是相对于模型进行缩放。

如果您使用轨迹球控件，则可以使用它进行平移和旋转。
因此，在鼠标滚轮中将启用的轨迹球控件设置为 false。

    renderer.domElement.addEventListener('mousewheel',
           function (e) {
                mousewheel(e);
                        },
           false);


    function mousewheel(event) {
            trackBallControls.noZoom = true;
            event.preventDefault();
            var factor = 50;
            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);
            //console.log(vector);
            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));
                camera.updateProjectionMatrix();
            } else {
                camera.position.subVectors(camera.position, 
                vector.setLength(factor));
                trackBallControls.target.subVectors(trackBallControls.target, 
                vector.setLength(factor));
                camera.updateProjectionMatrix();
            }
        }