CocosCreator-3D 3D物体触摸移动(跟随移动)

2023-11-01

 版本:cocoscreator3.4.0
基本原理:

通过触摸屏幕上的点生成一个射线,通过物理射线检测,获得是否点击到物体

通过射线的检测结果(raycastResults)获得碰撞点(hitPoint)

设置物体的x,z为碰撞点的x,y即可

import { _decorator, Component, Node, Camera, geometry, input, Input, EventTouch, PhysicsSystem, math, clamp, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('move')
export class move extends Component {

    @property(Camera)
    readonly cameraCom!: Camera;

    @property(Node)
    public targetNode!: Node

    private _ray: geometry.Ray = new geometry.Ray();

    _position = new math.Vec3();

    start() {
        math.Vec3.copy(this._position, this.targetNode.position);
    }


    onDestroy() {
        this._removeEvents();
    }

    onEnable() {
        this._addEvents();
    }

    onDisable() {
        this._removeEvents();
    }

    private _addEvents() {
      
        input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
     
    }

    private _removeEvents() {
        input.off(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
       
    }



    onTouchMove(event: EventTouch) {
        const touch = event.touch!;
        this.cameraCom.screenPointToRay(touch.getLocationX(), touch.getLocationY(), this._ray);
        if (PhysicsSystem.instance.raycast(this._ray)) {
            const raycastResults = PhysicsSystem.instance.raycastResults;
            for (let i = 0; i < raycastResults.length; i++) {
                const item = raycastResults[i];
                if (item.collider.node == this.targetNode) {
                    console.log('raycast hit the target node !');
                    this.updatePlayerPos_1(item.hitPoint)
                    break;
                }
            }
        } else {
            console.log('raycast does not hit the target node !');
        }
       
    }
    updatePlayerPos_1(hitPoint:Vec3){
       
        this._position.x=hitPoint.x
        this._position.z=hitPoint.z
        this.targetNode.setPosition(this._position);
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CocosCreator-3D 3D物体触摸移动(跟随移动) 的相关文章

  • Angular UI select:从远程服务获取数据

    我正在使用角度用户界面选择 https github com angular ui ui select https github com angular ui ui select 我查看了演示的可用位置这个笨蛋 http plnkr co
  • 使用 Firefox 插件 sdk 的 nsISocketTransportService

    我正在尝试使用 Firefox 来读取 SSH 横幅 IE 当您最初连接到 SSH 服务器时 服务器会向您发送其横幅 标识服务器软件 并且您向 SSH 服务器发送您的横幅 标识您的客户端软件 为此 我使用以下 URL 中的示例 firefo
  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时
  • 如何立即启动setInterval循环? [复制]

    这个问题在这里已经有答案了 在一个简单的setInterval setInterval function Do something every 9 seconds 9000 第一个动作将在 9 秒后发生 t 9s 如何强制循环立即执行第一个
  • 如何使 d3 饼图响应式?

    我有一个 PIE 图表 它工作正常 但我无法使其具有响应能力和可调整大小 我需要它与移动浏览器和 iPad 等兼容 div div
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 此页面上的脚本导致 ie 运行缓慢

    问题就在标题中 IE 行为异常 并说有一个脚本运行缓慢 FF 和 Chrome 没有这个问题 我怎样才能找到问题所在 那个页面有很多JS 手动检查不是一个好主意 EDIT 这是我正在处理的一个项目的页面 但我需要一个工具来查找问题 End
  • API 使用令牌向 odoo 进行身份验证

    我想使用令牌从 Express 应用程序向 Odoo 进行身份验证 我在用odoo xmlrpc https www npmjs com package odoo xmlrpc连接 Odoo 的节点模块 我的快递应用程序 Odoo 要求 A
  • 如何在 Vue SFC 中使用 Typescript 全局类型声明?

    In Vue2 Typescript我有的项目global d ts具有某些类型的文件 例如 全局 d ts type Nullable
  • 如果一个对象结构与另一个对象结构不匹配/不匹配,如何引发异常

    我将读取格式正确的用户输入对象 也就是说 输入对象现在可以具有接口中未定义的任何键或子结构 如果用户提供了无效的对象 我如何抛出异常 预定义接口 export interface InputStructureInterface tableN
  • 当我多次调用 requestAnimationFrame 时会发生什么

    我的意思是一次调用多个具有相同功能的 requestAnimationFrame function Draw DoSomething function AFunc prepare something requestAnimationFram
  • ES6继承:使用`super`访问父类的属性

    JavaScript 的super关键字 当我在 Chrome Babel TypeScript 上运行代码时 得到了不同的结果 我的问题是哪个结果是正确的 规范的哪一部分定义了这种行为 下面的代码 class Point getX con
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • Ionic 2 http.get() 问题

    我试着做一个http get 用这两个方法调用 First getResults return this http get http localhost api php toPromise then data gt data json 显示
  • 如何重复 ajax 请求,直到满足 RxJS Observable 的条件?

    我正在尝试重复请求 直到响应包含使用 RxJS 的数据 此时我想调用成功 或失败 处理程序 但我在使用 RxJS 时遇到了麻烦 这是我目前的方法 redux observable action observable mergeMap gt
  • 使用 ref 触发反应 dropzone 不起作用

    我正在实现这个库 https github com felixrieseberg React Dropzone Component https github com felixrieseberg React Dropzone Compone
  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • d3.event.translate 在触摸设备的缩放上包含 NaN

    我使用 d3 为我的 svg 编写了一个自定义缩放函数 如下所示 Zoom behavior function myzoom xpos d3 event translate 0 ypos d3 event translate 1 vis a
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒

随机推荐

  • CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://mirrors.tuna.tsinghua.edu.cn/anaconda错误

    在使用anaconda创建一个新的环境 执行 conda create n tf110 python 3 6 出现了 CondaHTTPError HTTP 000 CONNECTION FAILED for url
  • 我的电路实践

    任务一 任务二 任务三 任务四
  • 自动解压目录及子目录下所有压缩文件的批处理(偷懒专用^_^)

    以下内容存为 bat文件 置于你需要操作的目录下 双击运行即可自动解压目录及子目录下的所有 rar压缩文件 保持原有目录结构 并在解压后删除原压缩文件 可以根据自己需要对目录等进行修改 改成带参数的批处理或者对特定目录操作的批处理 将这个批
  • caliper的实操与报错合集,超详细的教程

    实操 验证python make g gcc git版本 sudo apt install y python2 7 sudo apt install y pip sudo apt install y make sudo apt instal
  • ACL2022 用于开放域问答的复制增强生成模型 A Copy-Augmented Generative Model for Open-Domain QuestionAnswering

    第一遍 标题 摘要 结论 可以看一看方法和实验部分重要的图和表 这样可以花费十几分钟时间了解到论文是否适合你的研究方向 第二遍 确定论文值得读之后 可以快速的把整个论文过一遍 不需要知道所有的细节 需要了解重要的图和表 知道每一个部分在干什
  • 数据可视化——seaborn(二)

    上一篇文章主要讲述了有关seaborn的一些基础设置 可以让使我们绘制的图形更加饱满 接下来我们来看seaborn可以绘制哪些图形 左边是我们常用的绘图接口 右边则是一些基础设置 还有一些功能有待补充 依次来看这些函数的实现方式和具体功能
  • IPv6 基础知识

    一 包结构 基本的 IPv4 报头包含 12 的字段 20 个字节长 options 和 padding 字段在需要时添加 基本的 IPv6 报头 40 个 8 位 bit 即 40 个字节长 共 8 个字段 下一个报头 Next Head
  • 兔子生兔子问题(java实现)

    一对兔子 从出生后第3个月起每个月都生一对兔子 小兔子长到第三个月后每个月又生一对兔子 假如兔子都不死 问第n个月的兔子对数为多少 分析 第一个月是1对第二个月是1对第三个月是1 1 2对第四个月是2 1 3对第五个月是3 2 5对第六个月
  • MybatisPlus 多租户架构(SaaS)实现

    引言 读写分离要做的事情就是对于一条SQL该选择哪个数据库去执行 至于谁来做选择数据库这件事儿 无非两个 要么中间件帮我们做 要么程序自己做 因此 一般来讲 读写分离有两种实现方式 第一种是依靠中间件 比如 MyCat 也就是说应用程序连接
  • 50_Pandas读取 Excel 文件 (xlsx, xls)

    50 Pandas读取 Excel 文件 xlsx xls 要使用 pandas 将 Excel 文件 扩展名 xlsx xls 作为 pandas DataFrame 读取 请使用 pandas read excel 函数 这里 将描述以
  • python: logHelper

    encoding utf 8 版权所有 2023 涂聚文有限公司 许可信息查看 https docs python org 3 library logging html 描述 https www programcreek com pytho
  • 北京大学肖臻老师《区块链技术与应用》公开课笔记17——ETH数据结构篇1(状态树1)

    北京大学肖臻老师 区块链技术与应用 公开课笔记 以太坊数据结构篇1 状态树1 对应肖老师视频 click here 全系列笔记请见 click here 以太坊数据结构篇1 状态树2请见 click here About Me 点击进入我的
  • uniapp swiper 指示点位置修改 亲测有用

    只需要设置swiper的高度高于子元素swiper item就OK 有效回来点个赞哈
  • 解决UE4缓存使C盘膨胀的问题

    大家好 可能很多新手使用UE4的时候会发现C盘越来越小了 那是因为UE4引擎的缓存文件默认保存在C盘的缘故 下面来告诉大家怎么解决这个问题 概述 一 出现的问题 UE4的缓存文件会导致C盘膨胀 二 解决的方式 请严格按照下列步骤来执行 1
  • springdata JPA@Query注解及@Modifying注解

    Query注解查询适用于所查询的数据无法通过关键字查询得到结果的查询 这种查询可以摆脱像关键字查询那样的约束 将查询直接在相应的接口方法中声明 结构更为清晰 这是Spring Data的特有实现 索引参数与命名参数 1 索引参数如下所示 索
  • c#操作符operate的用法

    operate operate 的用法 看代码 public struct CorePoint
  • 用户自定义类型(User-defined Type)参数的传递

    用户自定义类型 User defined Type 参数的传递 用户自定义类型在VB中是一种重要的数据类型 它为编程者提供了很大的灵活性 使开发人员可以根据需要构造自己的数据结构 它相当于C C 中的结构类型 structure 在VB中
  • 转【】浅谈sql中的in与not in,exists与not exists的区别_

    浅谈sql中的in与not in exists与not exists的区别 1 in和exists in是把外表和内表作hash连接 而exists是对外表作loop循环 每次loop循环再对内表进行查询 一直以来认为exists比in效率
  • 基于Cesium的实景三维模型动态更新-以3Dtiles为例(一)

    一 简介 Cesium众所周知 是一个前端的三维框架 本项目利用Cesium平台来实现实景三维模型的动态更新 不认识Cesium的同学戳这里 cesium中文网 学习cesiumjs 的好地方 伐罗密 实景三维模型 概括来讲就是倾斜摄影三维
  • CocosCreator-3D 3D物体触摸移动(跟随移动)

    版本 cocoscreator3 4 0 基本原理 通过触摸屏幕上的点生成一个射线 通过物理射线检测 获得是否点击到物体 通过射线的检测结果 raycastResults 获得碰撞点 hitPoint 设置物体的x z为碰撞点的x y即可