附带一个可用的OrbitControls.js
/threejs/examples/js/controls/OrbitControls.js
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>three.js使用OrbitControls.js控制几何体旋转、平移、缩放</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="../../js/three.js"></script><script src="../../js/OrbitControls.js"></script><!-- <script src="./three.js"></script> --></head><body><script type="text/javascript">var scene,camera,renderer,light,group,geometry,mesh,controls;init();//开始初始化//将需要初始化的放在该方法中统一初始化function init(){initScene();//初始化场景initCamera();//初始化相机initRenender();//初始化渲染器initLight();//初始化光线initOthers();//初始化其他参数setWindown();//窗体的设置setEventsMouse();//鼠标事件的定义setKeyEvents();//定义键盘按键事件initaxisHelper();//辅助坐标Box();}//初始化场景function initScene(){scene = new THREE.Scene();//创建场景}//初始化相机function initCamera(){//创建一个摄像机对象// camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);// camera.position.z=3;//设置相机的位置//创建相机对象camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);camera.position.set(292, 109, 268);//设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)}//初始化渲染器function initRenender(){//创建渲染器renderer = new THREE.WebGLRenderer();renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色renderer.setSize(window.innerWidth, window.innerHeight);}//其他内容初始化function initOthers(){document.body.appendChild(renderer.domElement);//渲染到浏览器}function Box() {geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometryvar material = new THREE.MeshLambertMaterial({color: 0x0000ff}); //材质对象Materialmesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中// 几何体xyz三个方向都放大2倍geometry.scale(2, 2, 2);// 几何体沿着x轴平移50geometry.translate(50, 0, 0);// 几何体绕着x轴旋转45度geometry.rotateX(Math.PI / 4);// 居中：偏移的几何体居中geometry.center();}//定义窗口的设置function setWindown(){//加入事件监听器,窗口自适应window.addEventListener('resize', function(){var width = window.innerWidth;var height = window.innerHeight;renderer.setSize(width,height);camera.aspect = width/height;camera.updateProjectionMatrix();});}//定义鼠标事件function setEventsMouse(){//点击了鼠标左键window.addEventListener( 'click', function(e){if(e.button===0){console.log("点击了鼠标左键");}} );//点击了鼠标右键window.addEventListener( 'contextmenu', function(e){if(e.button===2){console.log("点击了鼠标右键");}} );//鼠标移动坐标2D坐标window.addEventListener( 'mousemove', function(e){console.log('x:'+e.x);console.log('y:'+e.y);} );}//定义键盘按键事件function setKeyEvents(){window.addEventListener('keydown',function(e){console.log(e);});}function initaxisHelper() {//辅助三维坐标系AxisHelpervar axisHelper = new THREE.AxisHelper(250);scene.add(axisHelper);}//初始化光线function initLight(){//5. 光（Light）光源的基类。light = new THREE.Light(0xFFFFFF,1.0);scene.add(light);//光线加入场景中}//逻辑var update=function(){//物体随着XY轴旋转//cube.rotation.x +=0.01;//cube.rotation.y += 0.005;}// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作//requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧}//循环运行update，rendervar loop=function() {requestAnimationFrame(loop);//请求再次执行渲染函数render，渲染下一帧update();render();}controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象controls.addEventListener('change', render);//监听鼠标、键盘事件loop();//循环开始</script></body></html>
