<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>threejs鼠标移动控制模型旋转</title>

</head>

<body>

    <script src="js/threejs/three.js"></script>

    <!--<script src="http://jsrun.it/assets/a/q/3/W/aq3Wl" type="text/javascript"></script>-->

    <script src="js/threejs/renderers/CanvasRenderer.js"></script>

    <script src="js/threejs/renderers/Projector.js"></script>

    <script src="js/threejs/DDSLoader.js"></script>

        <script src="js/threejs/MTLLoader.js"></script>

        <script src="js/threejs/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;

    var pivot5, pivot6;

    init();

    function init() {

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);

      camera.position.z = 500;

      camera.position.y = 100;

      scene.add(camera);

      //坐标轴辅助

      var axes = new THREE.AxisHelper(500);

      scene.add(axes);

      renderer = new THREE.WebGLRenderer({ antialias: true });

      renderer.setClearColor( 0xffffcc );

      renderer.setPixelRatio( window.devicePixelRatio );

      renderer.setSize(window.innerWidth, window.innerHeight);

      //添加环境光

      var ambient = new THREE.AmbientLight( 0x444444 );

        scene.add( ambient );

        // 添加定向光线

        var directionalLight = new THREE.DirectionalLight( 0xffeedd );

        directionalLight.position.set( 0, 0, 1 ).normalize();

        scene.add( directionalLight );

        var onProgress = function ( xhr ) {

            if ( xhr.lengthComputable ) {

                var percentComplete = xhr.loaded / xhr.total * 100;

                console.log( Math.round(percentComplete, 2) + '% downloaded' );

            }

        };

        //加载obj 、材质、贴图

        var onError = function ( xhr ) { };

        THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); 

        var texture = new THREE.Texture();

        var loader = new THREE.OBJLoader();

        loader.setPath( 'models/' );

        pivot5 = new THREE.Object3D();

        //导入obj模型

        loader.load( 'tree.obj', function ( object ) {

            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {

                    child.material.map = texture;

                    //将模型放大40倍

                    var n=40;

                    child.scale.x =n;

                    child.scale.y =n;

                    child.scale.z =n;

                }

            } );

            pivot5.position.x = -100;

            pivot5.position.z = 100;

            object.position.x = 0;

            object.position.z = 0;

            object.position.y = 50;

            //scene.add( object );

            pivot5.add(object);

        }, onProgress, onError );

        //导入贴图

        var cubemtlLoader = new THREE.MTLLoader();

        cubemtlLoader.setPath( 'models/' );

        pivot6 = new THREE.Object3D();

        cubemtlLoader.load( 'cube.mtl', function( materials ) {

            materials.preload();

            var objLoader = new THREE.OBJLoader();

            objLoader.setMaterials( materials );

            objLoader.setPath( 'models/' );

            objLoader.load( 'cube.obj', function ( object ) {

                var n= 20;

                object.scale.x =n;

                object.scale.y =n;

                object.scale.z =n;

                //修改旋转轴的坐标点，默认是(0,0,0);

                pivot6.position.x = 100;

                pivot6.position.z = 100;

                object.position.x = 0;

                object.position.z = 0;

                object.position.y = 100;

                pivot6.add(object);

                render();

            }, onProgress, onError );

        });

      scene.add(pivot5);

      scene.add(pivot6);

      document.body.appendChild(renderer.domElement);

      document.addEventListener( 'mousedown', onMouseDown, false );

      document.addEventListener( 'mouseup', onMouseup, false );

    }

    var rotateStart;

    rotateStart = new THREE.Vector2();

    /*

        鼠标移动控制模型旋转思想：

        当按下鼠标时及时当前鼠标的水平坐标clientX1，在鼠标移动的过程中不断触发onMouseMove事件，

        不停的记录鼠标的当前坐标clientX2，由当前坐标减去记录的上一个水平坐标，

        并且将当前的坐标付给上一个坐标clientX1，计算两个坐标的之间的差clientX2-clientX1，

        将得到的差值除以一个常量（这个常量可以根据自己的需要调整），得到旋转的角度

    */

    function onMouseDown(event){

        event.preventDefault();

        mouseDown = true;

        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;

        }

        var deltaX = event.clientX - mouseX;

        mouseX = event.clientX;

        rotateScene(deltaX);

    }

    //设置模型旋转速度，可以根据自己的需要调整

    function rotateScene(deltaX){

        //设置旋转方向和移动方向相反，所以加了个负号

        var deg = -deltaX/279;

        //deg 设置模型旋转的弧度

        pivot5.rotation.y += deg;

        pivot6.rotation.y += deg;

        render();

    }

    function render() {

       renderer.render(scene, camera);

    }

    </script>

</body>

</html>

threejs 鼠标移动控制模型旋转的更多相关文章

  1. 在DirectX9中使用DXUT定制按钮来控制模型旋转的问题

    使用DXUT中的按钮控件类实现 控制模型旋转的过程如下: 1.创建一个CDXUTDialog对话框,并绑定至CDXUTDialogResourceManager对话框资源管理器. 2.绑定回调函数GU ...

  2. Unity在UI界面上显示3D模型/物体，控制模型旋转

    Unity3D物体在UI界面的显示 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  3. OpenGl 导入读取多个3D模型 并且添加鼠标控制移动旋转

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11627508.html 前言: 因为接下来的项目需求是要读取多个3D模型,并且移动拼接,那么我 ...

  4. 【Unity3D】使用鼠标键盘控制Camera视角（即时战略类游戏视角）：缩近，拉远，旋转

    今天写一个demo,要用到鼠标键盘控制三维视角,因此写了个脚本用于控制. 该脚本可以用于即时战略类游戏的视角,提供了缩进,拉伸,旋转.同时按住鼠标右键不放,移动鼠标可以实现第一人称视角的效果. usi ...

  5. Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能

    /**-------------------------------------------------代码区--------------------------------------------- ...

  6. 【转载】Unity3D研究院之IOS触摸屏手势控制镜头旋转与缩放

    前几篇文章介绍了很多Unity3D引擎自身的一些问题, 今天我们在回到IOS设备上讨论一些触摸屏幕手势,本章的目标是通过触摸iPhone屏幕手势 实现模型左右的旋转,与模型的缩放. 大家想一想模型的旋 ...

  7. 关于MFC与OpenGL结合绘图区域用鼠标来控制图形的移动的坑

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11773171.html 之前开发的导入多个模型,旋转,分别移动什么什么的,都是在纯OpenGL ...

  8. opengl鼠标键盘控制相机漫游

    键盘wsad控制相机位移,鼠标左键按下控制相机旋转 效果如下 代码如下 #include <stdio.h> #include <string.h> #include < ...

  9. OpenSceneGraph控制模型

    OpenSceneGraph控制模型 转自:http://www.cppblog.com/eryar/archive/2012/05/28/176538.html 一.简介 对模型的控制就是修改模型的 ...

随机推荐

  1. 为什么Mysql的常用引擎都默认使用B+树作为索引？

    一.前言 为了讲清楚这个问题,我们要先了解什么是索引. 我记得刚刚学习数据库的时候,老师喜欢用书本的目录来类比数据库的索引,并告诉我们索引能够像目录一样,让我们更快地找到想要找到的数据. 如果是第一次 ...

  2. 基于海龟编辑器python少儿编程

    Python 少儿教程 为什么要学习编程 扫地机器人.物流机器人.自动泊车系统.无人超市.3D打印.微信.支付宝等等,随着人工智能时代的到来,越来越多的岗位将被机器人所替代. 所以,学习编程的最终目的 ...

  3. C# 基础知识系列- 6 Lambda表达式和Linq简单介绍

    前言 C#的lambda和Linq可以说是一大亮点,C#的Lambda无处不在,Linq在数据查询上也有着举足轻重的地位. 那么什么是Linq呢,Linq是 Language Intergrated ...

  4. 巴什博弈 HDU-1846

    描述:一堆石子有 n 个 ,两个人开始轮流取,每人最多取m个,最少取1个,最后一个将石子取完的是赢家. 思路:对于先手来说,如果有(m+1)个石子,先手取 k 个,后手就可以取 m+1-k 个,所以有 ...

  5. 阿里云域名+ 腾讯云服务器 配置nginx

    1,实现目标,通过外网访问域名,能够通过nginx 实现反向代理,以及负载均衡 2,准备工具 阿里云注册的域名: aiyuesheng.com 腾讯云领取的云服务器:centos 7 xshell 6 ...

  6. Thread ---java 内存模型

    1,Java 线程之间的通信由Java 内存模型(JMM)控制.JMM决定一个线程对共享变量的写入时,能对另一个线程可见. 从抽象的角度来看,JMM定义了线程和主内存之间的抽象关系: 线程之间的共享变 ...

  7. C++ 趣图

    一.心形 1. http://mathworld.wolfram.com/HeartCurve.html #include<stdio.h> using namespace std; in ...

  8. 关于HashCode和equals方法在HashSet中的使用

    Object类是类层次结构的根类,故所有的类都是先该类的方法,其中HashCode()和equals()方法也是该类的方法. 1.HashCode()方法 Object类中HashCode()方法实现 ...

  9. ssh-add和ssh-agent

    注: 因为在ssh-agent异常关闭或者新开窗口是会导致ssh-add找不到私钥,导致添加的私钥无效,所以下面使用keychain管理 ssh-add 参数 -l 查看代理中的私钥 -L 查看代理中 ...

  10. P1130 红牌（动态规划）

    P1130 红牌 思路如下 这一题很像数字金字塔,我们可以正着求最小时间,当然也可以逆着求最小时间, 如果正着求:那么我们怎么求状态转移方程呢?,在这里我们假定状态转移方程为:dp[ i ][ j ] ...