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

最新推荐文章于 2024-07-08 09:56:34 发布

小张帅三代

最新推荐文章于 2024-07-08 09:56:34 发布

阅读量5.5k

点赞数 3

分类专栏： # JS 文章标签：张小三 three.js webGL

未经允许，不可转载

本文链接：https://blog.csdn.net/qq_38313548/article/details/90695668

版权

JS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

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>

小张帅三代

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【three.js第三课】鼠标事件，移动、旋转物体

1.下载three.js的源码包后，文件夹结构如下：2.在【three.js第一课】的代码基础上，引入OrbitControls.js文件，此文件主要用于对鼠标的操作。该文件位置：在文件结构中找到【examples】文件夹，进入；找到其中的【js】文件夹，进入；找到其中的【controls】文件夹，进入后即可找到【OrbitControls.js】文件；我的引入...
复制链接

扫一扫