threejs 实现场景围绕鼠标缩放,而不是默认的场景缩放中心

发布于:2022-12-23 ⋅ 阅读:(596) ⋅ 点赞:(0)

// function handleMouseWheel( event ) {

        //     if ( event.deltaY < 0 ) {

        //         dollyIn( getZoomScale() );

        //     } else if ( event.deltaY > 0 ) {

        //         dollyOut( getZoomScale() );

        //     }

        //     scope.update();

        // }

threejs中    实现鼠标缩放拖拽旋转事件的就是orbitControls控件,  所以我们直接改这里面的源码即可   或者自己去监听dom事件   进行修改   监听事件的话  记得本身的缩放=false     附上源码修改后的结果 

function handleMouseWheel( event ) {

            let factor = 6;

            let element = scope.domElement;

            let mx = (event.clientX / element.width) * 2 - 1;

            let my = -(event.clientY / element.height) * 2 + 1;

            let vector = new Vector3(mx, my, 0);

            vector.unproject(scope.object);

            vector.sub(scope.object.position).setLength(factor);

            if (event.deltaY < 0) {

                scope.object.position.add(vector);

                scope.target.add(vector);

            } else {

                scope.object.position.sub( vector);

                scope.target.sub(vector);

            }

            scope.update();

        }

原理的话  打开编辑器  自己闹个group  改变中心  去试试就懂了

本文含有隐藏内容,请 开通VIP 后查看