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

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>

 

发布了63 篇原创文章 · 获赞 35 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览