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

这篇博客探讨了如何在Three.js中使用OrbitControls实现鼠标滚轮缩放、拖拽旋转的功能。通过修改源码或直接监听DOM事件,可以自定义相机的行为。示例代码展示了如何处理鼠标滚轮事件,调整物体的缩放和平移。建议读者通过实践理解并掌握这些操作。
摘要由CSDN通过智能技术生成

// 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  改变中心  去试试就懂了

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zombie391

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值