Question

我希望能够通过环顾四周并按住纸板按钮来移动我的VR世界。我已经试了2个小时，无法弄明白。我真的不想使用远程传送作为我的解决方案。

Answer 1

我将它放在aframe组件中，并使用three.js API：

在init中检查鼠标是上升还是下降在tick中使用extractRotation(mesh.matrix)将旋转作为世界矩阵查找，使用direction.applyMatrix4(matrix)将其应用于前向矢量，并将其添加到当前相机位置。

AFRAME.registerComponent("foo", {
  init: function() {
    this.mouseDown = false
    this.el.addEventListener("mousedown", (e) => {
      this.mouseDown = true
    })
    this.el.addEventListener("mouseup", (e) => {
      this.mouseDown = false
    })
  },
  tick: function() {
    if (this.mouseDown) {
      let pos = this.el.getAttribute("position")
      let mesh = this.el.object3D
      var matrix = new THREE.Matrix4();
      var direction = new THREE.Vector3(0, 0, -0.1);

      matrix.extractRotation(mesh.matrix);  
      direction.applyMatrix4(matrix)
      direction.add(new THREE.Vector3(pos.x, pos.y, pos.z))
      this.el.setAttribute("position", direction)
    }
  }
})

工作小提琴here。

Answer 2

我通过在javascript中使用鼠标事件修复了我的问题并将其放在javascript文件中。这是移动点击的代码：

＆＃13;

var camera = document.getElementById('theCamera');
var pspeed = 0;
var mousestate = "up";
setInterval(function() {

  document.addEventListener('mousedown', function() {
    mousestate = "down";
  });
  document.addEventListener('mouseup', function() {
    mousestate = "up";
  });
  if (mousestate == "down") {
    pspeed = 0.03;
  } else {
    pspeed = 0;
  }
  y = camera.getAttribute('rotation').y + 90;
  x = camera.getAttribute('rotation').x;
  moveX = Math.cos(y / 360 * (Math.PI * 2));
  moveY = Math.sin(x / 360 * (Math.PI * 2));
  moveZ = Math.sin(y / 360 * (Math.PI * 2));
  moveXRatio = (Math.pow(moveX, 2)) / (Math.pow(moveX, 2) + Math.pow(moveZ, 2));
  moveZRatio = (Math.pow(moveZ, 2)) / (Math.pow(moveX, 2) + Math.pow(moveZ, 2));
  if (moveX <= 0) {
    moveX = -Math.sqrt((1 - Math.pow(moveY, 2)) * moveXRatio);
  } else {
    moveX = Math.sqrt((1 - Math.pow(moveY, 2)) * moveXRatio);
  }
  if (moveZ <= 0) {
    moveZ = -Math.sqrt((1 - Math.pow(moveY, 2)) * moveZRatio);
  } else {
    moveZ = Math.sqrt((1 - Math.pow(moveY, 2)) * moveZRatio);
  }
  camera.getAttribute('position').x += moveX * pspeed;
  camera.getAttribute('position').z -= moveZ * pspeed;
  camera.getAttribute('position').y += moveY * pspeed;
});

＆＃13;

<html>

<head>
  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>

<body>
  <a-scene>
    <a-torus-knot color="red" arc="90" p="3" q="8" radius="3" radius-tubular="0.2" position="0 0 -10"></a-torus-knot>

    <a-camera id="theCamera" position="0 1 5" wasd-controls="acceleration: 100">
      <a-cursor color="red" />
    </a-camera>

  </a-scene>


</body>

</html>wasd

＆＃13;

Aframe纸板运动

2 个答案: