一个管制挪动和视角的遥感控制器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);    }}

小结

坐标转换！旋转！跳跃！不停歇！

以上为白玉无冰应用 Cocos Creator 3D v1.1.1 实现 "摇杆控制器！" 的技术分享。欢送分享给身边的敌人！

那些不能激励本人的人肯定是甘于平庸的人，无论他们的其余能力有如许令人印象粗浅。

更多

原创导航

残缺代码 https://github.com/baiyuwubin...