WebGL添加鼠标滚动、平移、缩放功能

最新推荐文章于 2025-04-27 15:46:09 发布

原创最新推荐文章于 2025-04-27 15:46:09 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#WebGL

WebGL基础专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在Three.js项目中使用OrbitControls.js实现鼠标交互控制，包括调整旋转角度范围、设置阻尼效果、启用缩放和平移等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入OrbitControls.js
<script src="js/OrbitControls.js"></script>

2、写控制器函数

function controls() {
    // controls  控制鼠标滚动
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.maxPolarAngle = Math.PI *0.5;   //限制竖直方向上最大旋转角度 y轴正向为0~90度
    //controls.maxPolarAngle = Math.PI ;   //限制竖直方向上最大旋转角度 y轴正向为-90~90度
    controls.minDistance = 10;
    controls.maxDistance = 5000;
    // 如果使用animate方法时，将此函数删除
    //controls.addEventListener( 'change', render );
    // 使动画循环使用时阻尼或自转 意思是否有惯性
    controls.enableDamping = true;
    //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    //controls.dampingFactor = 0.25;
    //是否可以缩放
    controls.enableZoom = true;
    //是否自动旋转
    //controls.autoRotate = true;
    //是否开启右键拖拽
    controls.enablePan = true;
}

3、在主程序调用

function threeStart() {
    initThree();
    setStats();
    initCamera();
    initScene();
    initLight();
    initSun();
    initball();
    initCycle2();
    controls();   //看这几句 
    window.addEventListener( 'resize', onWindowResize, false );
    animation();
}

4、在animation函数中写入

controls.update(); 详见下

function animation()
{
    requestAnimationFrame(animation);
    controls.update();//这句不写，将不能鼠标左键旋转，鼠标中间键缩放
    stats.update();
    ballAnim();
    renderer.render(scene, camera);
}