3D摇杆控制器一种简单实现!Cocos Creator 3D!
时间:2022-07-22
本文章向大家介绍3D摇杆控制器一种简单实现!Cocos Creator 3D!,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一个控制移动和视角的遥感控制器3D示例项目。
效果
原理
在贪吃蛇大作战!蛇移动的思考与实现!中使用到一个摇杆控制器,不过这是在2D层面上,这次把它改到3D上。
摇杆
摇杆的原理大致是把触摸点的位置传给需要的组件。(参考KUOKUO的摇杆组件改的)
监听触摸事件后,需要做一次坐标转换。在Cocos 3D
中 ,坐标转换要用UITransformComponent
组件。
接着把坐标和角度以事件的形式发送出去就可以了。
onTouchMove(e: EventTouch) {
const location = e.getUILocation();
// 坐标转换
let pos = this.uITransform.convertToNodeSpaceAR(new Vec3(location.x, location.y));
// 根据半径限制位置
this.clampPos(pos);
// 设置中间点的位置
this.midNode.setPosition(pos.x, pos.y, 0);
// 算出与(1,0)的夹角
let angle = this.covertToAngle(pos);
// 触发回调
this.joyCallBack.forEach(c => c.emit([pos, angle]));
}
移动与视角
这里分了三个节点去分别控制节点移动,角色旋转,视角旋转。
使用摇杆返回的结果,根据模型初始状态和摄像机的角度,可以算出移动的速度和旋转的速度。
/** 移动摇杆触发回调 */
joysitckCallback(vector: Vec3, angle: number) {
// 根据摄像机的角度旋转
Vec3.rotateZ(vector, vector, Vec3.ZERO, this.node_camera.eulerAngles.y * macro.RAD);
this._vector = vector.normalize();
if (angle) {
// 模型初始朝前,补个90度
this.node_role.eulerAngles = new Vec3(0, angle + 90 + this.node_camera.eulerAngles.y, 0);
}
}
/** 旋转摇杆触发回调 */
joysitckAngleCallback(vector: Vec3, angle: number) {
this._vectorAngle = vector.normalize();
}
根据速度,每帧刷新位置和角度就可以了。
fix_update(dt: number) {
if (this._vector.lengthSqr() > 0) {
this.node.setPosition(this.node.position.add3f(this._vector.x * SPEED * dt, 0, -this._vector.y * SPEED * dt));
}
if (this._vectorAngle.lengthSqr() > 0) {
this.node_camera.eulerAngles = this.node_camera.eulerAngles.add3f(0, -this._vectorAngle.x, 0);
}
}
完整代码 https://github.com/baiyuwubing/cocos-creator-3d-examples
- GSM Hacking Part ②:使用SDR捕获GSM网络数据并解密
- 【自然框架】之数据访问 —— 再小的类库也需要设计。
- 【自然框架】之表单控件(一)实体类(Class)VS 字典(Dictionary)
- 跨平台后门Mokes现已加入OS X豪华午餐
- 【问底】严澜:数据挖掘入门——分词
- 机器学习-简单线性回归教程
- NSA(美国国安局)泄漏Exploit分析
- 详解Windows Shim的攻防利用
- 基于Github的源码白盒扫描工具Raptor
- 把业务逻辑变成数据结构和SQL语句的例子。自然架构改成自然框架
- 【自然框架】之通用权限(六):权限到节点
- 【自然框架】之“元数据”的威力
- 周末娱乐:讲真,这才是我所说黑客的定义!
- 数据访问函数库的使用方法(一)——添加修改数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- tensorflow运行提示未编译使用SSE4.1,SSE4.2等问题的解决方法
- [手把手系列之二]实现多层神经网络
- 使用SystemVerilog简化FPGA中的接口
- 想用深度学习谱写自己的音乐吗?这篇指南来帮你!(附代码)
- 你不是说你会aop吗?
- 开源:推荐一个不错的离线IP地址定位库
- 武磊告别西甲!Python带你解读「全村的希望」武磊职业数据
- 谁在崛起,谁在没落?新一线城市竞争力盘点,用Python绘制动态图带你看懂!
- 两数相加
- 这样设置 IDEA,让你爽到飞起!
- Tensorflow基础入门十大操作总结
- Spring Boot 2.x基础教程:使用EhCache缓存集群
- 白平衡初探
- Activity的启动过程详解(基于10.0源码)
- Activity生命周期-你真的了解吗?