VUE2+THREE.JS点击事件

本文介绍了如何在THREE.JS中添加点击事件监听,通过Raycaster计算鼠标位置与场景对象的交点,并在页面关闭时正确销毁事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.增加监听点击事件

renderer.domElement.addEventListener("click", this.onClick, false);
注:初始化render时监听
在这里插入图片描述

2.点击事件实现

onClick(event) {
	const raycaster = new THREE.Raycaster();
	const mouse = new THREE.Vector2();
	// 计算鼠标或触摸点的位置
	mouse.x = (event.clientX / this.$refs.draw.offsetWidth) * 2 - 1;
	mouse.y = -(event.clientY / this.$refs.draw.offsetHeight) * 2 + 1;
	// 更新射线   注意——> camera 是相机   定义到data里的
	raycaster.setFromCamera(mouse, camera);
	// 计算与所有对象的交点
	const intersects = raycaster.intersectObjects(scene.children, true);
	
	if (intersects.length > 0) {
	    //可以打印一下,intersects[0].object 是点击的设备模型信息		
	}
},

3.记得关闭页面时 销毁此监听事件

renderer.domElement.addEventListener("click", null, false); //remove listener to render

### 集成 Three.jsVue2 项目 为了在 Vue2 中集成和使用 Three.js,需先通过 npm 或 yarn 安装 `three` 和其他必要的库。对于额外的功能需求,比如 CSS 渲染器,则可以单独安装特定包如 `three-css2drender`[^2]。 #### 安装依赖项 ```bash npm install three @types/three --save npm install three-css2drender --save ``` #### 修改项目结构适应 Three.js 使用场景 考虑到项目的可维护性和模块化设计原则,在 Vue2 的单文件组件(SFC)内创建专门用于管理 Three.js 场景逻辑的部分是一个不错的选择。这通常意味着会有一个类似于下面这样的基本目录布局: - **src/components/** 下新增一个名为 `ThreeScene.vue` 的组件来封装所有的 Three.js 相关初始化以及渲染循环操作[^3]。 #### 编写 ThreeScene.vue 组件 在此组件内部,可以通过组合方式(composition API style),尽管 Vue2 默认支持的是选项式API(Options API), 来设置 up Three.js 环境,并将其与生命周期挂钩以便于控制何时启动或停止动画帧更新过程。 ```vue <template> <div ref="sceneContainer"></div> </template> <script> import * as THREE from 'three'; // 如果需要导入附加插件或其他资源也在这里完成... export default { name: "ThreeScene", mounted() { this.init(); window.addEventListener('resize', this.onWindowResize); }, beforeDestroy() { cancelAnimationFrame(this.frameId); // 停止请求新的动画帧 window.removeEventListener('resize', this.onWindowResize); }, methods: { init() { const container = this.$refs.sceneContainer; // 设置场景、相机、渲染器... let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(...); let renderer = new THREE.WebGLRenderer({ antialias: true }); // 将渲染器的 DOM 元素添加至容器中 container.appendChild(renderer.domElement); function animate() { /* ... */ } this.animate = animate.bind(this); this.frameId = requestAnimationFrame(this.animate); // 更多初始化代码... }, onWindowResize() {/* 处理窗口大小变化 */} } }; </script> <style scoped> /* 添加一些样式 */ </style> ``` 上述代码片段展示了如何在一个简单的 Vue2 单文件组件里边嵌入 Three.js 并实现基础功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值