html滚动条自动平移,WebGL添加鼠标滚动、平移、缩放功能

1、引入OrbitControls.js

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新直能分支调二浏页器朋代说，事刚需求函数中写入

c持环开行打进对端架处参触架码我通会法时果ontrols.update();    直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如详见下

function animation()

{

requestAnimationFrame(animation);

controls.update();//这句不写，将不能鼠标左键旋转，鼠标中间键缩放

stats.update();

ballAnim();

renderer.render(scene, camera);

}

本文来源于网络：查看 >https://blog.csdn.net/mikehopes/article/details/81842030