ThreeJS 移动端点击事件

最新推荐文章于 2023-07-11 14:54:35 发布
最新推荐文章于 2023-07-11 14:54:35 发布
阅读量295 收藏 1
点赞数
分类专栏： js 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47633953/article/details/129008307
版权

ThreeJS 点击事件

web端：

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

移动端：

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

ThreeJS 鼠标移动事件

web端：

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

移动端：

window.addEventListener('touchmove', onMouseClick, false);
Yakiraaa
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
threejs文件包，uniapp 里使用 echarts、threejs、地图插件等
03-17
本压缩包“threejs文件包”似乎包含了与使用Three.js在uni-app项目中整合ECharts和地图插件相关的资源。uni-app是一个多端开发框架，它允许开发者用一套代码编写应用，同时支持iOS、Android、H5等多个平台。将Three....
simple-world-threejs:一个用 Three.js 创建的简单世界。 点击移动，WASD走动
06-23
标题 "simple-world-threejs" 提供的信息表明，这是一个基于 Three.js 的项目，它创建了一个简单的交互式3D世界。Three.js 是一个非常流行的JavaScript库，用于在Web浏览器中创建和展示三维图形。在这个项目中，用户...
threejs点击事件
甘乐乐的博客
09-04 1万+
本文链接：https://blog.csdn.net/ithanmang/article/details/80897888 示例浏览地址：https://ithanmang.gitee.io/threejs/home/201807/20180703/02-raycasterDemo.html 双击鼠标左键选中模型并显示信息。 首先，解释一下三种坐标系的概念：场景坐标系（世界坐标系）、屏幕坐标系...
VUE使用Three.js实现模型，点击交互，相机旋转视角跟随移动（Threejs中使用Tweenjs，含demo源码）
热门推荐
一个咸鱼的博客
12-13 1万+
VUE使用Three.js实现模型，点击交互，相机旋转视角跟随移动（Threejs中使用Tweenjs，含demo源码）
threejs中PC与手机操作的一些总结
srk19960903的博客
10-26 6958
在一些简单的webgl项目中，我们经常碰到的操作就是两指缩放，滑动旋转，这两种操作经常要进行PC和手机的适配，这里总结一下我踩了的一些小小的坑吧~         1.手机与PC获取屏幕对应点击位置的方法不同：         手机是触摸获取位置，PC是点击鼠标获取位置两者的代码略有不同，这与threejs构建的3D世界没有关系，仅仅是将点击/触摸的位置转换为窗体位置罢了，我在下面总结一下：
three.js实现鼠标点击控制物体移动（带动画效果，位置精确）
weixin_43664855的博客
07-11 2160
实现鼠标点击控制物体移动并解决three.js定位不准确问题。
Threejs 通过Raycast实现点击效果
淡定九号的博客
11-11 997
Raycast实现点击效果
基于Three.js的点击移动ClickMoveControl
eevee_1的博客
03-03 1492
一直想写一个Three.js端的点击移动功能，参考的这个。鼠标左键拖动旋转视角，鼠标左键点击移动相机。 这样可以很方便的预览一些场景。 移动流程参考外网的一个源码，旋转视角功能参照官方demo的旋转方法写了一个。 编写流程估计也没人高兴看，重要的地方都注释了，移动端也做了适配，最终效果：http://eevee.com.cn/Examples/ClickMoveSample/index.html ...
Threejs手机端VR全景图+陀螺仪+IOS可使用
09-23
使用threejs开发，手机端VR全景图，IOS13版本点击按钮“启动IOS全景“同样可以使用，但是有点需说明，必须使用https协议才能使用手机端陀螺仪，老版本安卓不需要HTTPS，但是新版本安卓都升级了浏览器，都必须使用...
基于three.js+vue实现的3D手机项目源码，可以切换颜色，背景，自带旋转，可以点击摄像头的精灵模型查看手机信息
最新发布
02-17
在这个项目中，three.js用于构建手机模型，设置光照、材质、动画等效果，并处理用户的交互事件。 接着，我们来看`Vue.js`。Vue.js是一种轻量级的前端框架，它的主要特点是数据驱动视图。开发者定义好数据模型，Vue...
ThreeJs开发（移动，旋转，相机，纹理，鼠标事件等源代码）
11-16
threejs开发小实例，实现了创建场景灯光，摄像机，对物体的移动，旋转，以及摄像机的移动旋转，动画效果，灯光设置（源代码）
gyro:移动陀螺仪传感器和Three.js游乐场
05-24
点击屏幕，单击鼠标或点击任意键以发射飞机的推进器。 请勿过度操作，否则您将离开地球的重力而飞向逃生轨道。 它需要一些技巧才能使其进入稳定轨道。 一旦您的飞船无助飞行5秒钟，就会产生一艘新的飞船。 如果您的...
Threejs鼠标
usdnfo的专栏
12-13 664
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...
最详细的Vue3+ThreeJS开发打包支持WebGL的移动端App教程
BayMin0-0的博客
11-15 7000
最详细的Vue3+ThreeJS开发项目打包支持WebGL渲染的移动端App教程 最近公司的项目里要求开发一款具有三维应用的App项目,本来对于以前从未开发过支持三维APP前端程序员来说无疑是个挑战但既然有了这样的需求那就欣然地接受下来并扛在肩上,于是就开始大肆地收集了过往老前辈们此种开发的记录加之以个人不断踩坑,终于上天不负有心人按时完成了产品经理的这一系列需求,赶时周末作此记录来供后来者参考少踩点坑,若有描述不当之处敬请谅解与指出,谢谢 打包方法一:Vue3项目采用Cordova集成crosswalk插
Three.js移动端双指触屏控制旋转和缩放
YanisWu的博客
02-09 1564
Three.js，微信小程序，AR，触屏操作
VUE 调用threejs加载模型并显示，应用与手机端（HBuilder）
Rexinx博客
05-23 733
/ loader.load("static/images/qiu.obj", function (obj) { // 调用OBJ的loader函数,加载成功会有个回调函数，参数obj就是模型加载成功后的网格Mesh实例对象。
卡车移动端展示，threejs实现
浪里独行的博客
04-17 4820
此处坑点如下1、模型 参照工业模型的做法2、车漆 需要自定义shader 3、整体的场景效果（这个坑很大，很费时间）4、模型的轴心节点并非在设置的位置（在轮子上），需要转换一下，代码如下var axis2 = new THREE.Object3D(); axis2.position.set(-29.5,7.980,0); scene.add(axis2); axis2.add(mesh); mes...
threejs 使用陀螺仪实现手机端全景
凌风子夜
09-20 3505
在threejs中实现全景的方式有多种，其中有天空盒子，贴图反缩放，还有CSS3DRenderer渲染。 **方法：**CSS3DRenderer使用六幅图片绘制一个立方体盒子，将视角放置在其中，根据陀螺仪控制方向，移动视角。 首先两个引用包： <script src="js/controls/DeviceOrientationControls.js"></script&g...
Three.js开发之鼠标点击选中模型
YRY_Godot的博客
04-10 3549
var raycaster = new THREE.Raycaster() var mouse = new THREE.Vector2() function onMouseClick(event){ //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标 mouse.x = (event.clientX/window.innerWidth)*2-1 mouse.y = -((event.clientY/window.innerHeight)*2-1) //cons.
threejs obj 点击事件
05-01
threejs是一种基于WebGL的3D图形渲染库，它可以用来创建各种精美的3D交互式场景和应用，并且可以通过JavaScript进行控制。 在threejs中，可以使用OBJLoader加载OBJ模型文件，并添加点击事件来实现用户与模型的交互。首先需要为场景添加点击事件侦听器，可以通过THREE.Raycaster实现将屏幕坐标转换成3D场景坐标，并判断鼠标是否点击到了模型。在点击到模型时，可以获取模型的属性或者进行翻转、旋转等交互操作。 具体实现可以参考以下代码示例： //创建场景、相机、渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); //创建OBJLoader加载器，加载OBJ模型文件 var loader = new THREE.OBJLoader(); loader.load('model.obj', function(object) { scene.add(object); object.position.set(0, 0, 0); //添加点击事件侦听器 function onDocumentMouseDown(event) { event.preventDefault(); var mouseX = (event.clientX / window.innerWidth) * 2 - 1; var mouseY = -(event.clientY / window.innerHeight) * 2 + 1; var vector = new THREE.Vector3(mouseX, mouseY, 0.5); vector.unproject(camera); var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); var intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0 && intersects[0].object === object) { //点击到了模型，进行相应操作 } } document.addEventListener('mousedown', onDocumentMouseDown, false); }); 在实际应用中，还可以结合其他threejs功能如动画、材质等实现更加丰富的交互效果，开发出更加优秀的3D应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值