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

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

原创最新推荐文章于 2025-06-17 09:00:00 发布 · 2.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#threejs 移动端事件

threejs-交互事件专栏收录该内容

3 篇文章

订阅专栏

本文详述Three.js的Raycaster在PC及移动端的应用，包括屏幕坐标转换、事件监听及与Orbitcontrols插件冲突解决。适用于跨平台3D交互开发。

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

threejs的raycaster常用在PC端，但移动端的处理也不能忽略，手机和PC获取屏幕位置的方式不一样，PC端的详见上一篇文章。

二维屏幕坐标转3维世界坐标对比：
PC端：
PC端常用的鼠标事件：click，mousemove等

				mouse.x=(event.clientX/window.innerWidth)*2-1;
				mouse.y=-(event.clientY/window.innerHeight)*2+1;

移动端：
移动端在touch上一共有4个事件：touchstart 、touchmove 、touchend、 touchcancel。
一般来说，它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel .
其中touchcancel一般情况下不会触发，

				mouse.x=(event.touches[0].pageX/window.innerWidth)*2-1;
				mouse.y=-(event.touches[0].pageY/window.innerHeight)*2+1;

核心代码

根据装置判断兼容性

			var raycaster=new THREE.Raycaster();
			var mouse=new THREE.Vector2();
			function raycasterEvent(event){	
				event.preventDefault();
				
				if(event.touches){
					mouse.x=(event.touches[0].pageX/window.innerWidth)*2-1;
					mouse.y=-(event.touches[0].pageY/window.innerHeight)*2+1;
				}else{
					mouse.x=(event.clientX/window.innerWidth)*2-1;
					mouse.y=-(event.clientY/window.innerHeight)*2+1;	
				}
				
				raycaster.setFromCamera(mouse,camera);
				
				var intersect=raycaster.intersectObjects(scene.children,true);
				intersect[0].object.material.color.set(0xff0000);
			}
			window.addEventListener("click",raycasterEvent,false);
			//移动端必须使用移动端事件，否则无法检测
			window.addEventListener("touchstart",raycasterEvent,false);

常见问题

touch事件与threejs的Orbitcontrols插件相冲突，因为该插件内阻止了默认的touch事件，如果需要用到该插件又要用touch，需要在源码中去掉所有的阻止事件冒泡，event.preventDefault();
有个简单的方法，直接不要在render()方法中更新controls.update();