【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浅学【网络服务中间件】之MongoDB
一.关于MongoDB: MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供 ...
- 2020 python web开发就业要求锦集
郑州 Python程序员 河南三融云合信息技术有限公司 6-8k·12薪 7个工作日内反馈 郑州 1个月前 本科及以上2年以上语言不限年龄不限 微信扫码分享 收藏 Python程序员 河南三融云合信息 ...
- leetcode 每日签到 409. 最长回文串
题目: 最长回文串 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串. 在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意: ...
- C#面向对象--索引器
一.索引器(Indexer)允许类和结构的实例像数组一样通过索引取值,可以看做是对[]运算符的重载,索引器实际上就是有参数的属性,也被称为有参属性或索引化属性,其声明形式与属性相似,不同之处在于索引器 ...
- JSP学习笔记（四）
Java Servlet servlet的部署.创建与运行 servlet的工作原理 重定向与转发 使用session 1.servlet的部署.创建与运行 [1].创建Servlet 创建一个Ser ...
- Python turtle库的应用——蛇
turtle库介绍 1.Turtle中的turtle.setup()函数用于启动一个图形窗口,它有四个参数 turtle.setup(width, height, startx, starty) 分别 ...
- 6.Metasploit生成apk攻击Android实例
Metasploit进阶第四讲 生成Android apk文件 01 msfvenom基本参数 msfvenom介绍 承接上回,staged/unstage payload如何利用? msfven ...
- DFS 蜘蛛纸牌（深度解析）
蜘蛛纸牌 Problem Description 蜘蛛牌是windows xp操作系统自带的一款纸牌游戏,游戏规则是这样的:只能将牌拖到比她大一的牌上面(A最小,K最大),如果拖动的牌上有按顺序排好的 ...
- preg_replace突然感觉好强大啊
<p><img align="absmiddle" src="https://img.alicdn.com/imgextra/i1/1696415374 ...
- mac 升级到mavericks 安装php扩展现问题
mac 升级到mavericks 安装php扩展现以下问题 grep: /usr/include/php/main/php.h: No such file or directory grep: /us ...