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

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