【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 ...
随机推荐
- CVE-2019-17564：Apache Dubbo反序列化漏洞复现
0x00 漏洞背景 ①iiDubbo是一款高性能.轻量1级的开源java Rpc分布式服务框架. ②核心功能: ◉ 面向接口的远程过程调用 ◉ 集群容错和负载均衡 ◉ 服务自动注册与发现 ③特点: ◉ ...
- CF1324E Sleeping Schedule 题解
原题链接 简要题意: 每次可以将 \(a_i\) 减 \(1\) 或不变.求让 \(a_i\) 的前缀和 \(\% h\) 的值在 \([l,r]\) 区间中的最多的个数. E题是个水dp,也不怎样 ...
- Hive常用命令及作用
1-创建表 -- 内部表 create table aa(col1 string,col2 int) partitioned by(statdate int) ROW FORMAT DELIMITED ...
- TensorFlow-Bitcoin-Robot:一个基于 TensorFlow LSTM 模型的 Bitcoin 价格预测机器人。
简介 TensorFlow-Bitcoin-Robot:一个基于 TensorFlow LSTM 模型的 Bitcoin 价格预测机器人. 文章包括一下几个部分: 1.为什么要尝试做这个项目? 2.为 ...
- 对于一个由0..n的所有数按升序组成的序列，我们要进行一些筛选，每次我们取当前所有数字中从小到大的第奇数位个的数，并将其丢弃。重复这一过程直到最后剩下一个数。请求出最后剩下的数字。
输入描述: 每组数据一行一个数字,为题目中的n(n小于等于1000). 输出描述: 一行输出最后剩下的数字.我的思路是用两个链表,一个用于存储原数据,一个用于存储要丢掉的数据,再循环从元数据中剔除掉即 ...
- Oracle 10g客户端的安装和配置
1.双击Oracle11g_database安装目录下的Setup.exe. 2.选择“基本安装”,设置“安装位置”,填写“数据库名”和“口令”,点击“下一步”. 3.点击“下一步”. 4.一般会出现 ...
- Oracle12C的卸载过程
1.找到自己的Oracle12C安装目录,一般的安装目录为D:\app\u01\product\12.1.0\dbhome_1\deinstall ,双击deintall.dat文件进行卸载. 2.耐 ...
- SpringCloud服务的注册发现--------Eureka
1,什么叫做服务的注册与发现 服务的注册与发现基于注册中心,注册中心本身是一个服务,也相当于一个载体,其他服务的注册需要注册到这个注册中心上. 注册:当服务器启动的时候,会将自己的服务器信息,通过别名 ...
- VRRP协议：Virtual Route
VRRP协议:Virtual Route Redundancy Protocol虚拟路由冗余协议.是一种容错协议,保证当主机的下一跳路由出现故障时,由另一台路由器来代替出现故障的路由器进行工作,从而 ...
- 题解 P2620 虫洞
总体思路:离散化 + 建图 + 单源最短路(看见人少蒟蒻才敢发题解QAQ) 需要注意的是: 考虑到w范围较大,而实际虫洞数量较小,就只记录虫洞的起点与终点来建图. 建图时,虫洞起点可以去重. 在建图时 ...