threejs 头疼事情之一事件01

2024-06-20 06:36
文章标签 事件 01 threejs 事情 头疼

本文主要是介绍threejs 头疼事情之一事件01,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        在做threejs相关开发的时候,或者封装成三维可视化引擎的时候,应用到项目中,总会和事件打交道,因为项目肯定有交互。但是 threejs 对事件又不友好,反正折腾来折腾去,疼痛。

在Three.js中,Object3D类并没有内置的事件系统,如DOM元素在HTML中那样。Three.js主要关注于3D图形渲染,而不是事件处理。然而,Three.js提供了一些机制来处理用户输入和场景交互,以下是一些可以触发或监听的事件类型:

  1. 鼠标事件:通过使用Raycaster类,你可以检测鼠标点击或移动与3D对象的交点。这些事件通常不是直接在Object3D上触发,而是通过监听DOM元素(如canvas)的鼠标事件来实现。

  2. 触摸事件:类似于鼠标事件,你可以监听触摸屏幕的事件,并将其转换为3D空间中的射线,以检测与场景中对象的交点。

  3. 动画帧事件:使用requestAnimationFrame或Three.js的AnimationAction,你可以在每个动画帧中执行特定的逻辑。

  4. 渲染器事件:Three.js的渲染器(如WebGLRenderer)可以触发一些事件,例如在渲染前后。

  5. 自定义事件:你可以在Object3D或其他Three.js对象上实现自定义事件系统,通过使用JavaScript的EventEmitter或其他模式来管理和触发事件。

  6. 交互式控件事件:使用Three.js的控件(如OrbitControls)时,可以监听控件的事件,如旋转、缩放等。

  7. 物理引擎事件:如果你将Three.js与物理引擎(如Cannon.js或Ammo.js)结合使用,你可以监听物理事件,如碰撞或接触。

  8. 加载器事件:Three.js的加载器(如Loader)可以触发加载进度、成功或失败的事件。

  9. 音频事件:如果你使用Web Audio API与Three.js结合,可以监听音频相关的事件。

要在Three.js中实现类似DOM的事件监听,你可以扩展Object3D类或使用组合模式将事件监听器附加到3D对象上。

class InteractiveObject extends THREE.Object3D {constructor() {super();this.listeners = {};}addEventListener(type, listener) {if (!this.listeners[type]) {this.listeners[type] = [];}this.listeners[type].push(listener);}removeEventListener(type, listener) {const index = this.listeners[type].indexOf(listener);if (index !== -1) {this.listeners[type].splice(index, 1);}}dispatchEvent(event) {const type = event.type;if (this.listeners[type]) {this.listeners[type].forEach(listener => listener(event));}}
}const interactiveObject = new InteractiveObject();
interactiveObject.addEventListener('click', event => {console.log('Object clicked:', event);
});// 模拟触发事件
const clickEvent = { type: 'click' };
interactiveObject.dispatchEvent(clickEvent);

这篇关于threejs 头疼事情之一事件01的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1077376

相关文章

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件,把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new

hdu 2602 and poj 3624(01背包)

01背包的模板题。 hdu2602代码: #include<stdio.h>#include<string.h>const int MaxN = 1001;int max(int a, int b){return a > b ? a : b;}int w[MaxN];int v[MaxN];int dp[MaxN];int main(){int T;int N, V;s

集中式版本控制与分布式版本控制——Git 学习笔记01

什么是版本控制 如果你用 Microsoft Word 写过东西,那你八成会有这样的经历: 想删除一段文字,又怕将来这段文字有用,怎么办呢?有一个办法,先把当前文件“另存为”一个文件,然后继续改,改到某个程度,再“另存为”一个文件。就这样改着、存着……最后你的 Word 文档变成了这样: 过了几天,你想找回被删除的文字,但是已经记不清保存在哪个文件了,只能挨个去找。真麻烦,眼睛都花了。看

FreeRTOS内部机制学习03(事件组内部机制)

文章目录 事件组使用的场景事件组的核心以及Set事件API做的事情事件组的特殊之处事件组为什么不关闭中断xEventGroupSetBitsFromISR内部是怎么做的? 事件组使用的场景 学校组织秋游,组长在等待: 张三:我到了 李四:我到了 王五:我到了 组长说:好,大家都到齐了,出发! 秋游回来第二天就要提交一篇心得报告,组长在焦急等待:张三、李四、王五谁先写好就交谁的

【经验交流】修复系统事件查看器启动不能时出现的4201错误

方法1,取得『%SystemRoot%\LogFiles』文件夹和『%SystemRoot%\System32\wbem』文件夹的权限(包括这两个文件夹的所有子文件夹的权限),简单点说,就是使你当前的帐户拥有这两个文件夹以及它们的子文件夹的绝对控制权限。这是最简单的方法,不少老外说,这样一弄,倒是解决了问题。不过对我的系统,没用; 方法2,以不带网络的安全模式启动,运行命令行,输入“ne

BT天堂网站挂马事件后续:“大灰狼”远控木马分析及幕后真凶调查

9月初安全团队披露bt天堂网站挂马事件,该网站被利用IE神洞CVE-2014-6332挂马,如果用户没有打补丁或开启安全软件防护,电脑会自动下载执行大灰狼远控木马程序。 鉴于bt天堂电影下载网站访问量巨大,此次挂马事件受害者甚众,安全团队专门针对该木马进行严密监控,并对其幕后真凶进行了深入调查。 一、“大灰狼”的伪装 以下是10月30日一天内大灰狼远控的木马样本截图,可以看到该木马变种数量不

01 Docker概念和部署

目录 1.1 Docker 概述 1.1.1 Docker 的优势 1.1.2 镜像 1.1.3 容器 1.1.4 仓库 1.2 安装 Docker 1.2.1 配置和安装依赖环境 1.3镜像操作 1.3.1 搜索镜像 1.3.2 获取镜像 1.3.3 查看镜像 1.3.4 给镜像重命名 1.3.5 存储,载入镜像和删除镜像 1.4 Doecker容器操作 1.4

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{

react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

1、定义方法并绑定 class News extends React.Component {constructor(props) {super(props)this.state = {msg:'home组件'}}run(){alert("我是一个run") //方法写在类中}render() {return (<div><h2>{this.state.msg}</h2><button onCli

【Qt】定时器事件

定时器事件 在之前学习QTimer中实现了定时器的功能,而在QTimer背后是QTimerEvent定时器事件进行支撑的。在QObject中提供了一个timeEvent这个函数。 startTimer启动定时器killTimer关闭定时器 Qt 中在进⾏窗⼝程序的处理过程中,经常要周期性的执⾏某些操作,或者制作⼀些动画效果,使⽤定 时器就可以实现。所谓定时器就是在间隔⼀定时间后,去执⾏某⼀