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);
    }
}

小結

座標轉換！旋轉！跳躍！不停歇！

以上爲白玉無冰使用 Cocos Creator 3D v1.1.1 實現 "搖桿控制器！" 的技術分享。歡迎分享給身邊的朋友！

那些不能激勵自己的人一定是甘於平庸的人，無論他們的其他纔能有多麼令人印象深刻。

更多

原創導航

---

完整代碼 https://github.com/baiyuwubing/cocos-creator-3d-examples