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

根据鼠标滚轮中光标的位置进行缩放

1 个答案: