Question

尽管我一直潜伏在这里寻求帮助，但我还是这个论坛的新手。我目前正在使用带有A框架和JavaScript的AR进行娱乐。我正在使用在github上找到的操纵杆移动3d模型。幸运的是，我能够使用操纵杆来移动模型，但是不幸的是，我无法弄清楚在移动模型时如何旋转模型。任何帮助将不胜感激！

// turn joystick data into WASD movement in AFRAME
var f;
var ang;
var x_vec;
var y_vec;
var cam;

function updatePosition(data) {
    f = data.force;
    ang = data.angle.radian
    cam = document.getElementById("model");    

    x_vec = Math.cos(ang + 3.14 / 180 * cam.getAttribute('rotation')['x']);
    y_vec = Math.sin(ang + 3.14 / 180 * cam.getAttribute('rotation')['y']);

    x = cam.getAttribute("position")["x"] + f / 15 * (x_vec);
    y = cam.getAttribute("position")["y"]
    z = cam.getAttribute("position")["z"] - f / 15 * (y_vec);

    cam.setAttribute('position', `${x} ${y} ${z}`)
    cam.setAttribute('rotation', `${x} ${y} ${z}`)
}

Answer 1

具有新角度，只需将其添加到当前的rotation.y（因为您正在XZ平面上移动）。

唯一的不足是旋转应该以度为单位：

ang = data.angle.radian
cam = document.getElementById("model"); 
// grab the rotation
var rotation = cam.getAttribute("rotation")
rotation.y += ang * 180 / Math.PI
// set the new rotation
cam.setAttribute('rotation', rotation)

旋转实体和moving it forward的简单示例就是这样的组件

AFRAME.registerComponent("joystick-controls", {
  init: function() {
    // initialize the joystick  
    this.joystick = new JoyStick("joyDiv");
    // grab the rotation and position for later use
    this.rot = this.el.getAttribute("rotation");
    this.pos = this.el.getAttribute("position");
  },
  tick: function() {
    // wait until the joystick is ready
    if (!this.joystick) return;
    
    // handle rotation
    this.rot.y -= this.joystick.GetX() / 100;
    this.el.setAttribute("rotation", this.rot);
    
    // handle position 
    var speed = this.joystick.GetY() / 2000;
    this.pos.z += speed * Math.cos(this.rot.y * Math.PI / 180);
    this.pos.x += speed * Math.sin(this.rot.y * Math.PI / 180);
    this.el.setAttribute("position", this.pos);
  }
});

小故障here。我正在使用this joystick。

触摸操纵杆旋转实体

1 个答案: