Question

我正在使用a帧创建一个场景，其中的框根据正弦函数移动，但是该框未显示在视口内部。

我已经尝试通过更改“位置”属性并重置box.object3D.position来更新盒子位置。

HTML文件

<a-scene log="hello scene">
<a-assets>
  <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
</a-assets>

<a-box src="#boxTexture" position="0 0 -5" rotation="0 45 45" scale="0.5 0.5 0.5">
  <!-- <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
    repeat="indefinite"></a-animation> -->
  <a-animation attribute="scale" begin="mouseenter" dur="300" to="2.3 2.3 2.3"></a-animation>
  <a-animation attribute="scale" begin="mouseleave" dur="300" to="0.5 0.5 0.5"></a-animation>
  <a-animation attribute="rotation" begin="click" dur="2000" to="360 405 45"></a-animation>
</a-box>

<a-camera>
  <a-cursor></a-cursor>
</a-camera>

JavaScript文件

// low frequency oscillator
function lfo(amp, freq, phase) {
  var date = new Date();
  var millis = 0.001 * date.getMilliseconds();
  var value = amp * Math.sin(millis * freq + phase);
  return value;
}

var boxes = document.querySelectorAll('a-box');

function moveBoxes() {
  // loop through all the boxes in the document
  for (var i = 0; i < boxes.length; i++) {
    let x = lfo(1, 1, 0);
    let y = lfo(1, 1, 0.2);
    let z = lfo(1, 1, 0.7);
    boxes[i].object3D.position.set(x, y, z);
    //boxes[i].setAttribute("position", x+" "+y+" "+z);
  }
}

除了看到框位于场景中心还是至少位于左上角之外，我都不会。

Answer 1

2D视口未映射到3D场景中的3D位置。

A框架鼠标光标将鼠标点击映射为3D点击。我不确定，但是您也许可以使用这种方法将2D X / Y坐标转换为指定距离的{D3}}

但是，否则，我只是将某些东西作为照相机的子项。

<a-entity camera>
  <a-box move-sin-wave-or-whatever-animation position="0 0 -1"></a-box>
</a-entity>

如何相对于视口中心移动a实体[with object3D.position.set（x，y，z）]

1 个答案: