threejs Object的点击(鼠标)事件(获取点击事件的object)
objects=[];
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
//监听全局点击事件,通过ray检测选中哪一个object
document.addEventListener("mousedown", (event) => {
event.preventDefault();
this.mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1;
this.mouse.y = - (event.clientY / this.renderer.domElement.clientHeight) * 2 + 1; this.raycaster.setFromCamera(this.mouse, this.camera);
this.scene.children.forEach(child => {
if (child instanceof THREE.Mesh) {//根据需求判断哪些加入objects,也可以在生成object的时候push进objects
this.objects.push(child)
}
})
var intersects = this.raycaster.intersectObjects(this.objects); if (intersects.length > 0) {
console.log(intersects[0].object)
}
}, false)
threejs Object的点击(鼠标)事件(获取点击事件的object)的更多相关文章
- java:javaScript(定义方式,循环语句,函数与参数,事件机制,控制台记录,event事件获取键盘ascii,confirm和prompt,事件和内置对象,获取input,点击更换背景色)
1. 定义JS的两种方式: <!DOCTYPE> <html> <head> <meta charset="UTF-8"></ ...
- 点击鼠标获取元素ID
原文:点击鼠标获取元素ID public partial class Form1 : Form { public Form1() { InitializeComponent(); } private ...
- jQuery通过event获取点击事件的事件对象
要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...
- C#实现模拟鼠标点击事件(点击桌面的其他程序 )
注释感觉已经很清楚了,有不懂的欢迎评论 1 using System; using System.Collections.Generic; using System.ComponentModel; u ...
- 一段简单的代码记录如何通过 js 给 HTML 设置自定义属性,并且通过点击事件获取到所设置的自定义属性值
for (var i = 0; i <= 5; i++) { const divJoinDay = document.createElement("div"); divJoi ...
- 【three.js第七课】鼠标点击事件和键盘按键事件的使用
当我们使用鼠标操作three.js渲染出的对象时,不仅仅只是仅限用鼠标对场景的放大.缩小.旋转而已,还有鼠标左键.右键的点击以及键盘各种按键等等的事件.我们需要捕获这些事件,并在这些事件的方法里进行相 ...
- vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
- JS怎样将拖拉事件与点击事件分离?
帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...
随机推荐
- cocos2d-x入门三 分层设计框架
helloworld就是一个完整的框架,大致分为四个层次如下: 导演-------场景------图层-----精灵 Director-----Scene----Layer----Sprite 导演类 ...
- emmet常用指令组合
emmet的应用 1.生成html(需要先将文件命名为.html后缀) !+tab,html:5+tab 2.生成meta utf meta:utf+tab 3.生成meta viewpo ...
- JSP 表达式语言
JSP 表达式语言 JSP表达式语言(EL)使得访问存储在JavaBean中的数据变得非常简单.JSP EL既可以用来创建算术表达式也可以用来创建逻辑表达式.在JSP EL表达式内可以使用整型数,浮点 ...
- tinyxml解析xml
基于tinyxml做的简单的xml解析. 1.创建xml bool CreateXmlFile(string& szFileName) {//创建xml文件,szFilePath为文件保存的路 ...
- jquery下跨域请求之代码示例
场景描述: 在域A下异步获取B域下的接口: 实现方法: $.ajax({ url : (Q.lottery.serverTimeUrl || 'about:blank'), error : funct ...
- PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
本文实例讲述了PHP获取日期对应星期.一周日期.星期开始与结束日期的方法.分享给大家供大家参考,具体如下: /* * 获取日期对应的星期 * 参数$date为输入的日期数据,格式如:2018-6-22 ...
- 《Effective C++》第2章 构造/析构/赋值运算(2)-读书笔记
章节回顾: <Effective C++>第1章 让自己习惯C++-读书笔记 <Effective C++>第2章 构造/析构/赋值运算(1)-读书笔记 <Effecti ...
- gradle Could not create service of type CrossBuildFileHashCache using BuildSessionScopeServices.crea
gradle Could not create service of type CrossBuildFileHashCache using BuildSessionScopeServices.crea ...
- 《Drools7.0.0.Final规则引擎教程》第4章 4.5RHS语法
RHS语法 使用说明 RHS是满足LHS条件之后进行后续处理部分的统称,该部分包含要执行的操作的列表信息.RHS主要用于处理结果,因此不建议在此部分再进行业务判断.如果必须要业务判断需要考虑规则设计的 ...
- 对pandas的dataframe绘图并保存
对dataframe绘图并保存: ax = df.plot() fig = ax.get_figure() fig.savefig('fig.png') 可以制定列,对该列各取值作统计: label_ ...