【问题标题】:zooming on cursor position on a THREE.js object放大 THREE.js 对象上的光标位置
【发布时间】:2017-01-06 07:30:31
【问题描述】:

目前我正在处理一个 THREE.js 项目,在缩放对象时遇到问题。它在使用轨迹球控件时根据渲染的中心位置进行缩放,但我想根据光标位置进行缩放。我有尝试使用controls.noZoom=true 禁用轨迹球控件下的缩放,并在鼠标滚轮下编写了一个代码。正如我预期的那样非常好,但它只是放大而不是缩小。

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

使用此代码帮助我根据鼠标位置进行缩放。

【问题讨论】:

  • 我找到了解决办法

标签: javascript jquery three.js


【解决方案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));
                }
    };

【讨论】:

  • 嘿。我正在努力实现和你一样的目标。使用您的代码时,我遇到了一些错误并有一些问题要问您。相机是您在单独的 js 文件中预定义的相机变量吗?并且 trackBallControls 是您的轨迹球控制变量的名称也在单独的 js 文件中吗?我假设是这样,但我只是确定。谢谢。
  • 相机变量和轨迹球控制变量是同一个文件中的变量。我已经为你编辑了答案。
猜你喜欢
  • 2012-06-17
  • 2016-07-02
  • 2016-11-28
  • 1970-01-01
  • 2014-07-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-27
相关资源
最近更新 更多