Three.js入门学习笔记17：鼠标控制json文件的3d模型旋转

最新推荐文章于 2023-08-17 19:26:22 发布

月亮实验室

最新推荐文章于 2023-08-17 19:26:22 发布

阅读量983

点赞数

分类专栏： Three.js 文章标签： webgl js javascript 前端

本文链接：https://blog.csdn.net/jbwhysy/article/details/105136735

版权

参考学习
https://blog.csdn.net/tuoxinquyu/article/details/72391797

一.鼠标控制原理：

当按下鼠标时及时当前鼠标的水平坐标clientX1，在鼠标移动的过程中不断触发onMouseMove事件，不停的记录鼠标的当前坐标clientX2，由当前坐标减去记录的上一个水平坐标，
并且将当前的坐标付给上一个坐标clientX1，计算两个坐标的之间的差clientX2-clientX1，
将得到的差值除以一个常量（这个常量可以根据自己的需要调整），得到旋转的角度

二.核心代码：

  function init() {
   
  //加载json模型，将模型放入group1中
    var loaderC1 = new THREE.ObjectLoader();
        loaderC1.load("json/che0312.json", function(obj1) {
   
         obj1.traverse(function(child) {
   
            if (child instanceof THREE.Mesh) {
   
                child.material.side = THREE.DoubleSide;
        }
    });
        obj1.scale.multiplyScalar(50);     
        mesh1 = new THREE.Mesh();
        mesh1.name="Me1";
        mesh1.add(obj1);
        group1.add(mesh1);
        scene.add(group1);
        renderer.render(scene, camera);
        });
  //事件监听
    document.addEventListener( 'mousedown', onMouseDown, false );
    document.addEventListener( 'mouseup', onMouseup, false );      
}
  
//鼠标事件
 var rotateStart;
     rotateStart = new THREE.Vector2();
     
function onMouseDown(event){
   
        //阻止浏览器默认事件。什么是默认事件，例如浏览器默认右键菜单、a标签默认连接跳转
        event.preventDefault();
        mouseDown = true;
        //clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。
        mouseX = event.clientX;//触发事件时的鼠标指针的水平坐标
        rotateStart.set( event.clientX, event.clientY );
        document.addEventListener( 'mousemove', onMouseMove2, false );
    }
function onMouseup(event){
      
         //当鼠标松开时
        mouseDown = false;
         //移除鼠标移动的操作
        document.removeEventListener("mousemove", onMouseMove2);
    }

    function onMouseMove2(event){
   
         //如果鼠标没有按下，终止操作
        if(!mouseDown){
   
            return;
        }   
          //event.clientX是当前移动时，不断记录的鼠标X坐标。mouseX是鼠标按下时第一次记录的旋转起始点的鼠标X坐标,随着每一次移动，mouseX不断更新为上一次移动后的坐标点
        var deltaX = event.clientX - mouseX;
        mouseX = event.clientX;//我理解是，每移动单位距离就赋值，作为下一次移动的起始点
        //这样才能保证鼠标按下无论是向右还是向左，模型都跟着移动
        rotateScene(deltaX);        
    }

    //设置模型旋转速度，可以根据自己的需要调整
    function rotateScene(deltaX){
   
        //设置旋转方向和移动方向相反，所以加了个负号。不加负号就是正向移动
//         var deg = -deltaX/279;
        var deg = deltaX/279;
        //deg 设置模型旋转的弧度 在原来转动的基础上累加
        group1.rotation.y += deg;
        render();
    }

    function render() {
   
       renderer.render(scene, camera);  
    }

在这里插入图片描述

三.模型旋转

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>threejs鼠标移动控制模型旋转</title>

</head>

<body>

<script type="text/javascript" src="js/three.js"></script> 
    <!--<script src="http://jsrun.it/assets/a/q/3/W/aq3Wl" type="text/javascript"></script>-->
    <!--<script src="js/CanvasRenderer.js"></script>
    <script src="js/Projector.js"></script>
    <script src="js/DDSLoader.js"></script>
        <script src="js/MTLLoader.js"></script>-->
        <script src="js/OBJLoader.js"></script>
<!--    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="https://raw.githack.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.js"></script> -->

    <script>
    var camera, scene, renderer, geometry, material, mesh, mesh1;
    var pivot5, pivot6;
    var group = new THREE.Group();
    var group1 = new THREE.Group();

    init();

    function init() {
   

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.set(15,15,15);
//           camera.lookAt(new THREE.Vector3(0,0,0));
      camera.lookAt( scene.position );
//      camera.position.z = 500;
//      camera.position.y = 100;
      scene.add(camera);

      //坐标轴辅助  
      var axes = new THREE.AxisHelper(500);
      scene