【three.js第三课】鼠标事件，移动、旋转物体

1.下载three.js的源码包后，文件夹结构如下：

 

2.在【three.js第一课】的代码基础上，引入OrbitControls.js文件，此文件主要用于 对鼠标的操作。

该文件位置：在文件结构中

找到【examples】文件夹，进入；

找到其中的【js】文件夹，进入；

找到其中的【controls】文件夹，进入后即可找到【OrbitControls.js】文件；

我的引入文件如下：

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.整体代码: