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:;

   }

   canvas{

        width:%;

        height:%;

   }

</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(,window.innerWidth / window.innerHeight, 0.1, );

         //创建渲染器

        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(,,);

        var geometry1 = new THREE.BoxGeometry(,,);

        //创建材料   wireframe是否使用线条

        var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});

        //将材料和形状结合

        var cube = new THREE.Mesh(geometry,material);

        //加入场景中

        scene.add(cube);

        camera.position.z=;//设置相机的位置

        //逻辑

        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>

【three.js第三课】鼠标事件，移动、旋转物体的更多相关文章

  1. Js学习笔记一(鼠标事件.....)

    1.encodeURI与decodeURI()转化url为有效的url(能被识别) Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui& ...

  2. selenium python （三）鼠标事件

    # -*- coding: utf-8 -*-#鼠标事件 #ActionChains类中包括:                     # context_click()  右击:           ...

  3. python+selenium三：鼠标事件与键盘事件

    1.鼠标事件:# 每个模拟事件后需加.perform() 才会执行# context_click() 右击# double_click() 双击# drag_and_drop(source, targ ...

  4. JS禁止WEB页面鼠标事件大全

    <!--禁止鼠标右键代码-->:<noscript><ifra:<scriptlanguage=javas:<!--:if(window.Event):doc ...

  5. vue.js 第三课

    1.构造器 constructor 2.属性和方法 properties methods 3.实例生命周期 instance_lifecycle   1.vue.js都是通过 var vm=new V ...

  6. js中的所有鼠标事件 键盘事件

    https://www.cnblogs.com/torchstar/p/null.html

  7. JS a标签默认鼠标事件，导致无法修改input选中状态

    今天踩了一个坑

  8. 【three.js第四课】自定义材料、贴图。

    1.先去下载6张不同的图片素材放到项目中. 2.在[three.js第三课]的代码基础上添加自定义的材料 //自定义材料 cubeMaterial 数组 //map:用于加载图片,THREE.Text ...

  9. c#全局鼠标事件以及鼠标事件模拟

    最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...

随机推荐

  1. Happens-before先行发生原则

    简介 从JDK1.5,java使用新的JSR-133内存模型:JSR-133使用happens-before的概念来阐述操作之间的内存可见性:在JMM中,如果一个操作执行的结果需要对另一个操作可见,那 ...

  2. 渗透测试-IP相关知识整理

    IP地址: 英文名称为Internet Protocol Address,是指互联网协议地址又称为网际协议地址.IP地址是Ip协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台机器分配一个 ...

  3. CompTIA Security+ 常见知识点

    前言: Security+ 认证是一种中立第三方认证,其发证机构为美国计算机行业协会CompTIA: 是和CISSP.CISA等共同包含在内的国际IT业热门认证之一,和CISSP偏重信息安全管理相比, ...

  4. hdu3695 AC自动机优化

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3695/ 不加last指针的AC自动机会T,原因是他费了很多功夫在跳转上,而last指针是直接直到跳转的终止位置, ...

  5. docker image换包步骤

    Docker Commit 1.在IDEA中通过maven package得到watchman-1.5.0-SNAPSHOT.jar,将其scp到baisheng1本地: 2.查看dbaservice ...

  6. PyTorch专栏（二）

    专栏目录: 第一章:PyTorch之简介与下载 PyTorch简介 PyTorch环境搭建 第二章:PyTorch之60min入门 PyTorch 入门 PyTorch 自动微分 PyTorch 神经 ...

  7. vscode vue 格式化 ESLint 检查 单引号 双引号 函数括号报错问题

    vscode vue 格式化 最近重新搞了下电脑,重装了 vscode 软件,在用 vue 写项目的时候,照例开启了 ESLint 语法检查,但是发现在使用 vscode 格式化快捷键的时候(shif ...

  8. coding++：mybatis 嵌套查询子查询column传多个参数描述

    mybatis 嵌套查询子查询column传多个参数如下: 2.代码示例 备注:注意,相同颜色的单词都是有关联的 <resultMap id="blogResult" typ ...

  9. iOS 图片的解压缩

    一.图片加载的工作流 概括来说,从磁盘中加载一张图片,并将它显示到屏幕上,中间的主要工作流如下: 假设我们使用 +imageWithContentsOfFile: 方法从磁盘中加载一张图片,此时的图片 ...

  10. windows远程桌面内部错误的处理方法

    远程桌面内部错误的处理方法 1 执行:netsh winsock reset 2 重启网络连接 3 重启远程连接服务 remote Desktop Services 4 关闭连接警告 高级 -> ...