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

<!DOCTYPE html><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);         //创建形状 BoxGeometry        var 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,render        var loop=function() {             requestAnimationFrame(loop);             update();             render();        }         loop();//循环开始</script></body></html>


版权声明:本站部分内容由互联网用户自发贡献,文章观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请拨打网站电话或发送邮件至1330763388@qq.com 反馈举报,一经查实,本站将立刻删除。

文章标题:【three.js第三课】鼠标事件,移动、旋转物体发布于2024-01-16 22:33:27

相关推荐