three.js添加鼠标事件—使用onEvent.js插件

最新推荐文章于 2024-01-22 16:20:23 发布

柠檬菜菜

最新推荐文章于 2024-01-22 16:20:23 发布

阅读量1.6k

点赞数

文章标签： three.js

本文链接：https://blog.csdn.net/weixin_46941477/article/details/114119545

版权

本文介绍了如何使用onEvent.js插件来简化three.js中的鼠标事件处理。相比官方的Raycast类，onEvent.js提供更便捷的方法来实现物体拾取和监听，包括'click', 'hover', 'gaze', 'longGaze'等事件。" 127444496,11904724,Dev C++ 调试指南,"['C++', '调试工具', '编程技巧']

摘要由CSDN通过智能技术生成

three.js的官方文档中提供了一个Raycast类进行物体拾取来实现模型鼠标事件，其原理就是先建立一个Raycaster对象，通过setFromCamera函数向场景物体发出射线，再通过intersectObject检测射线投射到的物体。很显然这种点击物体实现代码有些繁琐，因此通过不断地查询资料，找到一个封装了鼠标事件的插件，即onEvent.js插件。相比之下，使用插件更加简便易懂。

onEvent.js的使用方法

1、引入
使用script标签引入onEvent.js
2、初始化
确保已经引入onEvent.js，在render渲染之前初始化

var threeOnEvent = new THREE.onEvent(scene,camera);

3、添加监听器“on”

mesh.on</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

柠檬菜菜

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

three 响应鼠标点击事件

Asiter的博客

12-23

1408

three 响应鼠标点击事件提示: 我现在这边是用的vue2.0的项目来使用的three 1.事前了解要先知道3种坐标屏幕坐标: 我们在web端打开的时候是屏幕坐标场景坐标: three的场景内的物体所在场景内的坐标视点坐标: 以相机为原点。只有进入到相机内的物体才进行计算.才具有的坐标图片偷自 https://segmentfault.com/a/1190000010490845 2.方法选取官方已经提示了做法了，射线探测法先把屏幕上点击的坐标转换为场景内的坐标。然后采用射线

three.js事件绑定插件--onEvent

細水、長流√的专栏

12-22

1811

Three.js是构建web3d场景非常流行的框架，利用three.js我们可以更优雅地创建出三维场景和三维动画，本文主要针对three.js的点击事件以及相关插件进行介绍。最近在使用three.js开发Web3d的时候，想要给的3d物体添加onclick事件，查遍了three的官方文档发现，three.js的mesh（3d网格）没有类似HTML里dom的addEventListener的绑定事件，只提供了一个Raycast类进行物体拾取，引用three.js中文文档介绍如下：光线投射器（Raycas

3 条评论您还未登录，请先登录后发表或查看评论

JS--事件(Event)--使用

IT利刃出鞘的博客

07-25

654

其他网址 JS一个元素怎么绑定多个事件_BarryLee的博客-CSDN博客_绑定多个事件JavaScript(1)---绑定事件、解除绑定事件 - 雨点的名字 - 博客园事件大全其他网址事件参考 | MDN

events插件的使用

web_cgh的博客

08-21

649

1、events.js import { EventEmitter } from 'events'; export default new EventEmitter(); 2、引用文件 import emitter from "../../utils/events"; //发送事件传递一个参数true this.eventEmitter = emitter.emit('detailPage...

Event.js:自定义事件实现使用纯 javascript

06-16

事件.js 自定义事件实现使用纯 javascript 用法 Event.on("eventName", fn); Event.emit("eventName", [args]); Event.unsubscribe("eventName"); 例子 function handler(msg) { console.log(msg); } Event.on("data:stored", handler); Event.emit("data:stored", "Data were already stored!"); //output: "Data were already stored!"

JS--事件(Event)--机制/原理

IT利刃出鞘的博客

01-02

1962

说明本文介绍JavaScript中的事件的机制。包括：事件的捕获与冒泡，事件的流程。官网事件大全：事件参考 | MDN JavaScript事件介绍事件是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。我们也可以自定义事件。

flv-demo_htmlflv.js拉流_flv.js自动播放_flv.js参数说明_flvjsjs拉流_flv直播流播放_源

10-04

- `onEvent`: 事件监听回调，可以监听播放状态、缓冲进度等事件。 - `destroy`: 清除播放器实例，释放资源。 6. **flvjsjs拉流**：`flvjs.createPlayer`方法用于创建`flvPlayer`实例，配置参数如`{type: 'flv', ...

对layui中的onevent 和event的使用详解

12-11

执行自定义模块事件，搭配onevent使用参数1我暂时理解为组，定义子级方法和使用event调用都需要注意这个参数必须一致参数二是定义父级方法名，如果有需要定义该方法的子方法时候同样使用onevent,但参数二的方法...

ding-dong：在＃Node.js上为#Asterisk快速创建AGI服务器！

02-03

用于快速AGI（星号网关接口）服务器的node.js库使用叮当 -Asterisk的AGI语音识别器（使用Yandex和Google语音识别器）用于查找电话号码的区域代码的AGI服务器（俄罗斯）用于Asterisk的成本最低的路由器 ...

threejs给模型绑定点击或者鼠标移入事件，兼容mobile和pc

马娟的博客

09-16

4653

//投影获取点击或鼠标移入的模型 var raycaster = new THREE.Raycaster() var mouse = new THREE.Vector2() function findIntersectedModule(e, arrMesh) { var intersected; //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义 if (isMobile) { if (e.changedTouches) {

three.js实现点击事件（vue）

lidaima的博客

03-15

4527

three.js 实现点击事件(Vue)。

threejs Object的点击(鼠标)事件(获取点击事件的object)

qq_42039996的博客

12-16

2244

objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个object document.addEventListener("mousedown", (event) => { 　　event.preventDefault(); 　　this.mouse...

threejs里Object3D（mesh，camera，group等）的事件应用

niuge8905的博客

04-19

6278

threejs里继承了Object3D的类都可以加载事件。这些类包含mesh，camera，group等等。如下： //给相机添加事件 camera.addEventListener("onCameraChange",this._onCameraChange); // 相机变化事件 _onCameraChange:function(){ dosomething()...

对于事件的监听/解除事件工具类

LzwGlory的专栏

02-28

1200

/** 事件工具 */ var EventUtil = { addHandler : function(element, type, handler) { if (element.addEventListener) { //for ie9+ element.addEventListener(type, handler, false); } else if (element.

mesh threejs 属性_Three.js怎么才可以对每一个mesh绑定事件？

weixin_33447647的博客

12-23

656

还真的有人问这个问题。three.js官方没有提供交互事件的支持，但是你可以试试我的这个库，可以让你轻松的为任何显示对象绑定浏览器的各种交互事件。import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';import { Interaction } fr...

three.js从入门到精通系列教程044 - 创建多个立方体添加鼠标事件移过选中

深南大道

01-22

464

【代码】three.js从入门到精通系列教程044 - 创建多个立方体添加鼠标事件移过选中。

threejs如何在三维场景中添加点击事件

Youxingfang的博客

04-22

3810

threejs如何在三维场景中添加点击事件 threejs触发点击事件一般通过THREE.Raycaster射线来实现，当射线与物体相交，触发事件 this.$refs.loadDiv.addEventListener( "click", this.onDocumentMouseDown, false ); onDocumentMouseDown: function(event) { event.preventDe

js之高级技巧

weixin_40322503的博客

04-24

829

安全的类型检测 js内置的类型检测方法并不安全。 ①typeOf 不能用于检测array只能返回object，不能检测null只能返回object，但是出乎意料的是可以检测symbol、function和undefined。类型返回值都是字符串、而且都是小写打头。 ②instanceOf是用来判断是不是某个东西的实例对象的，比如一道经典的题： var isArray = value in...

nestjs 使用 socket.io 管理连接、处理事件、广播消息

最新发布

09-13

NestJS 是一个用于构建高效、可靠和可扩展的服务器端应用程序的框架。它使用 TypeScript 编写，但也兼容纯 JavaScript。NestJS 内置了对 WebSocket 的支持，并且可以通过集成 socket.io 来管理连接、处理事件和广播消息。以下是使用 socket.io 在 NestJS 中管理连接、处理事件和广播消息的基本步骤： 1. 安装依赖：首先需要安装 NestJS 和 socket.io 相关的依赖包。 ```bash npm install @nestjs/websockets @nestjs/platform-express socket.io ``` 2. 创建 WebSocket 模块：使用 NestJS 提供的装饰器和模块创建一个 WebSocket 模块。 ```typescript // socket.module.ts import { Module } from '@nestjs/common'; import { WebsocketsModule } from '@nestjs/websockets'; import { SocketModule } from '@nestjs/platform-express'; @Module({ imports: [ WebsocketsModule.register(), SocketModule, ], }) export class AppModule {} ``` 3. 创建 Socket 守护者（Guard）或拦截器（Interceptor）：根据需要，你可能想要创建一个守卫或拦截器来处理验证、授权等逻辑。 ```typescript // socket.guard.ts import { Injectable } from '@nestjs/common'; import { CanActivate, ExecutionContext } from '@nestjs/common'; import { Socket } from 'socket.io'; @Injectable() export class SocketGuard implements CanActivate { canActivate(context: ExecutionContext): boolean { const ctx = context.switchToHttp(); const req = ctx.getRequest<Socket>(); // 在这里添加你的验证逻辑 return true; // 或者根据验证结果返回 false } } ``` 4. 创建 Socket 控制器：创建一个 Socket 控制器来处理客户端事件和发送消息。 ```typescript // socket.controller.ts import { Controller, OnModuleInit, OnModule销毁, EmitEvent, OnEvent, socket } from '@nestjs/websockets'; import { Socket as IoSocket } from 'socket.io'; @Controller('socket') export class SocketController implements OnModuleInit, OnModule销毁 { @OnModuleInit() onModuleInit(client: IoSocket) { // 初始化时的操作，例如连接的统计、初始化数据广播等 } @OnModule销毁() onModule销毁(client: IoSocket) { // 模块销毁时的操作 } @EmitEvent('userConnected') handleUserConnected(data: any) { // 当客户端触发 userConnected 事件时调用 return data; } @OnEvent('connection') handleConnection(client: IoSocket) { // 当客户端连接时的操作 } @OnEvent('disconnect') handleDisconnect(client: IoSocket) { // 当客户端断开连接时的操作 } } ``` 5. 使用装饰器来注册事件处理器：`@EmitEvent`、`@OnEvent` 等装饰器用于注册对应的事件处理函数。 6. 在主模块中导入 WebSocket 模块：确保你的 WebSocket 模块在主模块中被导入。 ```typescript // app.module.ts import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppModule } from './app.module'; import { SocketModule } from './socket.module'; @Module({ imports: [AppModule, SocketModule], controllers: [AppController], }) export class AppModule {} ``` 现在，你的 NestJS 应用已经可以使用 socket.io 来管理连接、处理事件和广播消息了。