ThreeJS 移动端点击事件

最新推荐文章于 2025-06-17 09:00:00 发布

Yakiraaa

最新推荐文章于 2025-06-17 09:00:00 发布

阅读量460

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_47633953/article/details/129008307

js 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何在ThreeJS环境下处理web端和移动端的点击以及鼠标移动事件。使用window.addEventListener监听click、touchstart、mousemove和touchmove事件，结合onMouseClick函数实现交互功能。

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

ThreeJS 点击事件

web端：

window.addEventListener('click', onMouseClick, false);

移动端：

window.addEventListener('touchstart', onMouseClick, false);

ThreeJS 鼠标移动事件

web端：

window.addEventListener('mousemove', onMouseClick, false);

移动端：

window.addEventListener('touchmove', onMouseClick, false);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Yakiraaa

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

学习threejs，通过THREE.Raycaster给模型绑定点击事件

我哎GIS博客

10-22

1867

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.Raycaster光线投射概念二、🍀通过THREE.Raycaster给模型绑定点击事件1. ☘️实现思路2. ☘️代码样例一、🍀前言本文详细介绍如何基于threejs在三维场景中实现通过THREE.Raycaster给模型绑定点击事件，亲测可用。希望能帮助到您。一起学习，加油！加油！ 1.1 ☘️THREE.Ray

ThreeJs开发（移动，旋转，相机，纹理，鼠标事件等源代码）

11-16

threejs开发小实例，实现了创建场景灯光，摄像机，对物体的移动，旋转，以及摄像机的移动旋转，动画效果，灯光设置（源代码）

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

Three.js移动端双指触屏控制旋转和缩放

YanisWu的博客

02-09

2541

Three.js，微信小程序，AR，触屏操作

threejsboilerplate：用于桌面和移动端的three.js快速启动模板

最新发布

gitblog_01086的博客

06-17

243

threejsboilerplate：用于桌面和移动端的three.js快速启动模板在现代Web开发中，3D图形和视觉效果的应用越来越广泛，three.js作为一款强大的3D JavaScript库，为开发者提供了便捷的工具和接口。而threejsboilerplate项目正是基于这一库，为开发者提供了一套在桌面和移动端快速启动three.js项目的基础模板。以下是关于此项目的详细介绍。项目介...

threejs interactive -2 Raycaster之移动端事件处理

凌风子夜

07-29

2147

threejs的raycaster常用在PC端，但移动端的处理也不能忽略，手机和PC获取屏幕位置的方式不一样，PC端的详见上一篇文章，PC端有点击，获取鼠标移动状态，而移动端只有触摸（touch）。二维屏幕坐标转3维世界坐标对比： PC端： click，mousemove等 mouse.x=(event.clientX/window.innerWidth)*2-1; mouse....

Threejs手机端VR全景图+陀螺仪+IOS可使用

09-23

使用threejs开发，手机端VR全景图，IOS13版本点击按钮“启动IOS全景“同样可以使用，但是有点需说明，必须使用https协议才能使用手机端陀螺仪，老版本安卓不需要HTTPS，但是新版本安卓都升级了浏览器，都必须使用https协议！！！切忌

基于Three.js的点击移动ClickMoveControl

eevee_1的博客

03-03

1662

一直想写一个Three.js端的点击移动功能，参考的这个。鼠标左键拖动旋转视角，鼠标左键点击移动相机。这样可以很方便的预览一些场景。移动流程参考外网的一个源码，旋转视角功能参照官方demo的旋转方法写了一个。编写流程估计也没人高兴看，重要的地方都注释了，移动端也做了适配，最终效果：http://eevee.com.cn/Examples/ClickMoveSample/index.html ...

simple-world-threejs:一个用 Three.js 创建的简单世界。点击移动，WASD走动

06-23

标题 "simple-world-threejs" 提供的信息表明，这是一个基于 Three.js 的项目，它创建了一个简单的交互式3D世界。Three.js 是一个非常流行的JavaScript库，用于在Web浏览器中创建和展示三维图形。在这个项目中，用户...

threejs文件包，uniapp 里使用 echarts、threejs、地图插件等

03-17

本压缩包“threejs文件包”似乎包含了与使用Three.js在uni-app项目中整合ECharts和地图插件相关的资源。uni-app是一个多端开发框架，它允许开发者用一套代码编写应用，同时支持iOS、Android、H5等多个平台。将Three....

基于three.js+vue实现的3D手机项目源码，可以切换颜色，背景，自带旋转，可以点击摄像头的精灵模型查看手机信息

02-17

在这个项目中，three.js用于构建手机模型，设置光照、材质、动画等效果，并处理用户的交互事件。接着，我们来看`Vue.js`。Vue.js是一种轻量级的前端框架，它的主要特点是数据驱动视图。开发者定义好数据模型，Vue...

Threejs鼠标

usdnfo的专栏

12-13

734

var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseClick( event ) { //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mous...

webgl(threejs)实现室内漫游-导航功能-应用于移动端

05-12

webgl(threejs)实现室内漫游-导航功能-应用于移动端。模型是采用glb模型。基于threejs来实现的webgl项目，能应用于手机app、小程序等。后期结合室内蓝牙定位技术，来实现实时的室内导航。具体的项目实现方式，解决的难点在文章里有写到。 https://blog.csdn.net/Highning0007/article/details/124718344

threejs在手机端的touchmove失效。

A13330069275的博客

11-23

2654

这里是在知乎上找到的回答：首先要确定下你的需求具体是什么样的，是要监听整个场景的touchmove事件，还是要操作三维模型如果是整个场景的话： 1.可以在事件捕获阶段拿到事件的target DOM.addEventListener( 'touchmove', function(e){ console.log(e) }, true ); //第三个参数为true 2...

Webgl（ThreeJS）在移动端实现室内漫游的解决方案（附工程）

蒙双眼看世界

05-12

4810

在移动端实现室内漫游，先看效果截图：整体的漫游Demo效果看链接：技术点：一、加载模型采用异步加载glb模型。二、空间中路线规划三、3D场景中画线四、自动漫游五、移动端点击事件的响应。六、最后整体的工程文件供学习 ...

Threejs 通过Raycast实现点击效果

淡定九号的博客

11-11

1126

Raycast实现点击效果

Threejs实现鼠标控制相机+键盘控制模型+点击指定点控制模型移动

weixin_62328265的博客

08-09

2395

Threejs实现鼠标控制相机+键盘控制模型+点击指定点控制模型移动, 包含预览图,技术栈,源码与详细原理解释

Threejs进阶之十：让模型移动到鼠标点击的指定位置

九仞山的专栏

04-29

3271

介绍了让模型移动到鼠标点击的指定位置的详细思路和方法，里面用到了HTML中DOM获取坐标的属性和方法，Threejs中光线折射的方法，归一化，向量等知识

threejs 使用陀螺仪实现手机端全景

凌风子夜

09-20

3769

在threejs中实现全景的方式有多种，其中有天空盒子，贴图反缩放，还有CSS3DRenderer渲染。 **方法：**CSS3DRenderer使用六幅图片绘制一个立方体盒子，将视角放置在其中，根据陀螺仪控制方向，移动视角。首先两个引用包： <script src="js/controls/DeviceOrientationControls.js"></script&g...

VUE 调用threejs加载模型并显示，应用与手机端（HBuilder）

Rexinx博客

05-23

911

/ loader.load("static/images/qiu.obj", function (obj) { // 调用OBJ的loader函数,加载成功会有个回调函数，参数obj就是模型加载成功后的网格Mesh实例对象。

there.js移动端 IOS 安卓 360全景视频可以点击

02-27

### 使用 Three.js 实现移动端可交互的 360 全景视频为了实现在 iOS 和 Android 移动设备上使用 Three.js 创建可交互的 360 度全景视频播放器，需要考虑移动平台的特点和优化。以下是详细的实现方案： #### 准备工作确保开发环境已经安装并配置好了 Webpack 或者其他模块打包工具以便于管理依赖项。 #### HTML 结构设置定义基本页面结构，在其中引入必要的 JavaScript 文件。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Interactive Panoramic Video</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>  </body> </html> ``` #### 初始化场景、相机与渲染器创建一个基础的 Three.js 场景，并初始化透视投影相机及 WebGL 渲染器。 ```javascript const scene = new THREE.Scene(); // 设置宽高比为窗口宽度除以高度 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` #### 加载并处理视频纹理加载 MP4 或 WebM 格式的全景视频作为材质贴图应用到球体几何体上。 ```javascript let videoTexture; function loadVideo() { const video = document.createElement('video'); video.src = 'path/to/your/video.mp4'; // 替换成实际路径 video.crossOrigin = ''; video.loop = true; videoTexture = new THREE.VideoTexture(video); videoTexture.format = THREE.RGBFormat; videoTexture.type = THREE.UnsignedByteType; videoTexture.mapping = THREE.EquirectangularReflectionMapping; return video; } ``` #### 构建球形网格模型用于展示全景视图构建一个内表面朝外的大半径球体来承载视频素材。 ```javascript const geometry = new THREE.SphereGeometry(500, 60, 40); // 半径较大使得内部视角更自然 geometry.scale(-1, 1, 1); // 将UV坐标反转使视频正确映射至球体内侧 const material = new THREE.MeshBasicMaterial({ map: videoTexture, }); material.side = THREE.BackSide; const sphereMesh = new THREE.Mesh(geometry, material); scene.add(sphereMesh); ``` #### 控制逻辑编写通过监听触摸事件或陀螺仪数据调整观察角度。对于桌面浏览器，则可以通过鼠标拖拽改变视角；而对于移动设备来说，应该利用手势识别库（如 Hammer.js）捕捉滑动手势来进行相应操作[^1]。 #### 响应式设计考量考虑到不同尺寸屏幕之间的差异性，应当让应用程序能够自适应各种分辨率变化。 ```javascript window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }, false); ``` #### 开始动画循环更新帧率最后一步是启动渲染循环函数 `animate()` 来持续刷新画面内容直到停止条件满足为止。 ```javascript function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } loadVideo().play(); // 同步调用 play 方法开始播放视频 animate(); ``` 上述代码片段展示了如何基于 Three.js 搭建适用于移动终端的互动型 360° 视频播放解决方案。需要注意的是，由于性能原因，在某些低端硬件上的表现可能不如预期理想，因此建议针对特定目标群体测试并适当简化图形效果以提高兼容性和流畅度[^4]。