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. 题解 P5835 【 USACO19DEC Meetings S】

    前言 这道题目是道好题,想通了之后就可以把轻松这道题做出来. 正文 结论 先把一个结论写出来. 无论所有奶牛怎么走,它们的体重从左往右组成的序列是不会发生改变的. 这个结论简单地说明一下. 首先我们可 ...

  2. Springboot CORS跨域访问

    Springboot CORS跨域访问 什么是跨域 浏览器的同源策略限制: 它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础 ...

  3. 简述UDF/UDAF/UDTF是什么，各自解决问题及应用场景

    UDF User-Defined-Function 自定义函数 .一进一出: 背景 系统内置函数无法解决实际的业务问题,需要开发者自己编写函数实现自身的业务实现诉求. 应用场景非常多,面临的业务不同导 ...

  4. Python第一章-编码规范

    Python的基础知识 一.编码规范 PEP8[^ 注] 编码规范 Guido的关键点之一是:代码更多是用来读而不是写.编码规范旨在改善Python代码的可读性. 风格指南强调一致性.项目.模块或函数 ...

  5. HDU-1051 一个DP问题

    Problem Description There is a pile of n wooden sticks. The length and weight of each stick are know ...

  6. Kaggle竞赛入门：决策树算法的Python实现

    本文翻译自kaggle learn,也就是kaggle官方最快入门kaggle竞赛的教程,强调python编程实践和数学思想(而没有涉及数学细节),笔者在不影响算法和程序理解的基础上删除了一些不必要的 ...

  7. Spring - 事务管理概述

      什么是事务管理? 第一个问题:什么是事务? 事务一般是相对数据库而言的,对于数据库一次操作就属于一个事务, 一次操作可以是几句 SQL 语句,也可以是若干行 JDBC 的 Java 语句.事务既然 ...

  8. 2020.4.4号全国疫情哀悼日网页变灰色前端是如何实现的？-pink老师

    今天是4.4疫情哀悼日,纪念疫情期间牺牲的烈士和逝世同胞,因此大部分网站颜色都变灰色了,我们前端是如何实现的呢? 核心原理,使用css3的滤镜效果即可,filter grayscale 将整个界面变为 ...

  9. KA 接口表

    一.建表 1.年日均销量表 drop table app.app_basic_dashboard_goods_avg_year_sellnum; CREATE TABLE app.app_basic_ ...

  10. 实现ls

    一.任务详情 参考伪代码实现ls的功能,提交代码的编译,运行结果截图,码云代码链接 打开目录文件 针对目录文件 读取目录条目 显示文件名 关闭文件目录文件 二.伪代码 opendir while(re ...