1.下载three.js的源码包后，文件夹结构如下：
2.在【three.js第一课】的代码基础上，引入OrbitControls.js文件，此文件主要用于 对鼠标的操作。
该文件位置：在文件结构中
找到【examples】文件夹，进入；
找到其中的【js】文件夹，进入；
找到其中的【controls】文件夹，进入后即可找到【OrbitControls.js】文件；
我的引入文件如下：
<script src="jquery.min.js"></script><script src="../build/three.js"></script><script src="../examples/js/controls/OrbitControls.js"></script>
3.在【three.js第二课】代码中加入：
//轨道控制 镜头的移动var controls = new THREE.OrbitControls(camera,renderer.document);
4.预览即可。
【长按鼠标左键拖动】：旋转物体
【长按鼠标右键拖动】：移动物体
【滑动鼠标滚轮】：放大缩小物体
由于【three.js第二课】代码中物体会自动旋转，若要停止，只需要将一下代码注释即可：
//逻辑var update=function(){//物体随着XY轴旋转//cube.rotation.x +=0.01;//注释，停止自转//cube.rotation.y += 0.005;//注释，停止自转}
5.整体代码:
<html><head><title>demo1</title></head><style type="text/css">body{margin:0;}canvas{width:100%;height:100%;}</style><body><script src="jquery.min.js"></script><script src="../build/three.js"></script><script src="../examples/js/controls/OrbitControls.js"></script><script type="text/javascript">var scene = new THREE.Scene();//创建场景//创建一个摄像机对象var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);//创建渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);//渲染到浏览器//加入事件监听器,窗口自适应window.addEventListener('resize', function(){var width = window.innerWidth;var height = window.innerHeight;renderer.setSize(width,height);camera.aspect = width/height;camera.updateProjectionMatrix();})//轨道控制 镜头的移动var controls = new THREE.OrbitControls(camera,renderer.document);//创建形状 BoxGeometryvar geometry = new THREE.BoxGeometry(1,1,1);var geometry1 = new THREE.BoxGeometry(1,1,1);//创建材料 wireframe是否使用线条var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});//将材料和形状结合var cube = new THREE.Mesh(geometry,material);//加入场景中scene.add(cube);camera.position.z=3;//设置相机的位置//逻辑var update=function(){//物体随着XY轴旋转cube.rotation.x +=0.01;cube.rotation.y += 0.005;}//绘画渲染var render=function() {renderer.render(scene,camera);}//循环运行update，rendervar loop=function() {requestAnimationFrame(loop);update();render();}loop();//循环开始</script></body></html>
版权声明：本站部分内容由互联网用户自发贡献，文章观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请拨打网站电话或发送邮件至1330763388@qq.com 反馈举报，一经查实，本站将立刻删除。
文章标题：【three.js第三课】鼠标事件，移动、旋转物体发布于2024-01-16 22:33:27
