【three.js第七课】鼠标点击事件和键盘按键事件的使用
当我们使用鼠标操作three.js渲染出的对象时，不仅仅只是仅限用鼠标对场景的放大、缩小、旋转而已，还有鼠标左键、右键的点击以及键盘各种按键等等的事件。我们需要捕获这些事件，并在这些事件的方法里进行相关的操作。
接下来是干货
在【three.js第六课】的基础上，对代码进行整理后。得到本次试验的源码。下面的代码是在原来的第六课的基础上将对应的代码写成方法再进行调用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TestClickEvent</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script src="../examples/js/effects/AnaglyphEffect.js"></script>
<script type="text/javascript">
var scene,camera,renderer,
controls,effect,light; init();//开始初始化 //将需要初始化的放在该方法中统一初始化
function init(){
initScene();//初始化场景
initCamera();//初始化相机
initRenender();//初始化渲染器
initLight();//初始化光线
initOthers();//初始化其他参数
setWindown();//窗体的设置
setEventsMouse();//鼠标事件的定义
setControl();//设置鼠标控制
setKeyEvents();//定义键盘按键事件
setGeometrys();//定义物体
} //初始化场景
function initScene(){
scene = new THREE.Scene();//创建场景
} //初始化相机
function initCamera(){
//创建一个摄像机对象
camera = new THREE.PerspectiveCamera(,window.innerWidth / window.innerHeight, 0.1, );
camera.position.z=;//设置相机的位置
} //初始化渲染器
function initRenender(){
//创建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
} //其他内容初始化
function initOthers(){
document.body.appendChild(renderer.domElement);//渲染到浏览器
} //定义窗口的设置
function setWindown(){
//加入事件监听器,窗口自适应
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
});
} //定义鼠标事件
function setEventsMouse(){
//点击了鼠标左键
window.addEventListener( 'click', function(e){
if(e.button===){
console.log("点击了鼠标左键");
}
} ); //点击了鼠标右键
window.addEventListener( 'contextmenu', function(e){
if(e.button===){
console.log("点击了鼠标右键");
}
} ); //鼠标移动坐标2D坐标
window.addEventListener( 'mousemove', function(e){
console.log('x:'+e.x);
console.log('y:'+e.y);
} ); } //定义键盘按键事件
function setKeyEvents(){
window.addEventListener('keydown',function(e){
console.log(e);
});
} //定义控制
function setControl(){
//轨道控制 镜头的移动
controls = new THREE.OrbitControls(camera,renderer.document); //物体3D化
effect = new THREE.AnaglyphEffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
} //定义物体
function setGeometrys(){
//创建形状 BoxGeometry
var geometry = new THREE.BoxGeometry(,,);
var cubeMaterial = [
//右
new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
//左
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
//上
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
//下
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
//前
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
//后
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide}) ];
//创建材料 wireframe是否使用线条
//var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
var material = new THREE.MeshFaceMaterial(cubeMaterial); //将材料和形状结合
var cube = new THREE.Mesh(geometry,material); //物体加入场景中
scene.add(cube); } //初始化光线
function initLight(){
//5. 光（Light）光源的基类。
light = new THREE.Light(0xFFFFFF,1.0);
scene.add(light);//光线加入场景中
} //逻辑
var update=function(){
//物体随着XY轴旋转
//cube.rotation.x +=0.01;
//cube.rotation.y += 0.005;
} //绘画渲染
var render=function() {
//renderer.render(scene,camera);
effect.render(scene,camera);//渲染3D画面
} //循环运行update，render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
} loop();//循环开始
</script>
</body>
</html>
定义鼠标事件。
当点击鼠标左键时，返回参数中的button值为0.
当点击鼠标右键时，返回参数中的的button值为1.
当鼠标移动时，返回参数中的x、y代表了鼠标的当前坐标 ，坐标是2D的坐标。
//定义鼠标事件
function setEventsMouse(){
//点击了鼠标左键
window.addEventListener( 'click', function(e){
if(e.button===){
console.log("点击了鼠标左键");
}
} ); //点击了鼠标右键
window.addEventListener( 'contextmenu', function(e){
if(e.button===){
console.log("点击了鼠标右键");
}
} ); //鼠标移动坐标，2D坐标
window.addEventListener( 'mousemove', function(e){
console.log('x:'+e.x);
console.log('y:'+e.y);
} ); }
定义按键按钮事件时，按下按键返回的值中存在keyCode的参数，该参数代表对应键盘按键的按键码。每个按键的按键码都是不一样的。通过按键的按键码可以判断用户按下了哪个按键。
//定义键盘按键事件
function setKeyEvents(){
window.addEventListener('keydown',function(e){
console.log(e);
});
}
以下是键盘上按键对应的按键码对应表：
【three.js第七课】鼠标点击事件和键盘按键事件的使用的更多相关文章
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- Atitit.js的键盘按键事件捆绑and事件调度
Atitit.js的键盘按键事件捆绑and事件调度 1. Best的方法还是 objEvtMap[ id+evt ]=function(evt,element) 2. Event bind funct ...
- JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索
代码如下 (填入Key值) : <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- js之好看的鼠标点击-光标特效
1.光标特效 <script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js">< ...
- 原生js及H5模拟鼠标点击拖拽
一.原生js 1.拖拽的流程动作 鼠标按下 触发onmousedown事件 鼠标移动 触发onmousemove事件 鼠标松开 触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限 ...
- vue.js第七课
条件渲染 v-if template v-if v-show v-else v-if 与 v-show handlebars.js 1.v-if 如果我们想一次 控制 多个元素呢? 我们可以吧一个 ...
- 网页中，鼠标点击与javascript的click事件怎么区分处理
就下面问题发现另一个方式: js代码: <script> //IE if(document.all) { document.getElementById("clickme&quo ...
- js模拟键盘按键事件
var WshShell = new ActiveXObject('WScript.Shell') WshShell.SendKeys('{ }'); 说明:大括号内的是键盘上的按键如: 空格:{ } ...
- JQuery的焦点事件focus() 与按键事件keydown() 及js判断当前页面是否为顶级页面 子页面刷新将顶级页面刷新 window.top.location
相关代码如下,使用看注解 <script type="text/javascript"> if(window.self != window.top){ window.t ...
随机推荐
- 小白学 Python 数据分析（21）：pyecharts 好玩的图表（系列终篇）
人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...
- tomcat源码分析01-启动过程概览
导读:tomcat是一个开源的web服务器,它实现了我们常用的Servlet,JSP,EL等相关规范,因为其性能稳定,开源等因素得到越来越多开发者的青睐,出于学习的目的,我决定研读其源码,并将阶段性成 ...
- nmap加载nse脚本在内网渗透中的使用－上
转载自:https://mp.weixin.qq.com/s/zEgHxJEOfaiYVZYmg7NnXA? 大多数情况下,大家都认为nmap只是一个扫描工具,而不把当成是一个渗透工具.nmap集成了 ...
- 题解 P5835 【 USACO19DEC Meetings S】
前言 这道题目是道好题,想通了之后就可以把轻松这道题做出来. 正文 结论 先把一个结论写出来. 无论所有奶牛怎么走,它们的体重从左往右组成的序列是不会发生改变的. 这个结论简单地说明一下. 首先我们可 ...
- OpenCV-Python 图像梯度 | 十八
目标 在本章中,我们将学习: 查找图像梯度,边缘等 我们将看到以下函数:cv.Sobel(),cv.Scharr(),cv.Laplacian()等 理论 OpenCV提供三种类型的梯度滤波器或高通滤 ...
- OpenCV-Python 改变颜色空间 | 十三
目标 在本教程中,你将学习如何将图像从一个色彩空间转换到另一个,像BGR↔灰色,BGR↔HSV等 除此之外,我们还将创建一个应用程序,以提取视频中的彩色对象 你将学习以下功能:cv.cvtColor, ...
- Ceph学习笔记（2）- CRUSH数据分布算法
前言: 分布式存储系统需要让数据均匀的分布在集群中的物理设备上,同时在新设备加入,旧设备退出之后让数据重新达到平衡状态尤为重要.新设备加入后,数据要从不同的老设备中迁移过来.老设备退出后,数据迁移 ...
- 解析PE文件
最近在自学解析PE文件,根据小辣椒(CFF Explorer)以及各论坛上大佬的帖子,做了个黑屏打印PE文件的,历时7天完成,在此想跟有相关需要的同学们分享下思路,有不足之处也希望大家不吝赐教,指点出 ...
- FME中矢量裁剪
- HTTP 请求状态码
200 请求成功 304 从缓存中读取 302 + 响应头中定义location: 重定向 // 自定义重定向 @RequestMapping("/customRedirecti ...