Question

我正在尝试在 a-frame 相机视图中放置图片。请分享一个例子。

Answer 1

快速执行此操作的方法是添加一个不可见的“标记”作为相机的子项，并在添加对象时将其位置用作生成点。

HTML

<a-scene>
  <a-camera>
    <a-entity id="marker" position="0 0 -5"></a-entity>
  </a-camera>
  <a-cylinder id="floor" height="0.1" radius="10" color="green"></a-cylinder>
</a-scene>

JS

var sceneEl = document.querySelector('a-scene');
var markerEl = document.querySelector('#marker');

// Add boxe when spacebar is pressed.
document.addEventListener('keyup', function (e) {
  if (e.keyCode !== 32) return;

  var newEl = document.createElement('a-box');
  newEl.setAttribute('color', 'red');
  sceneEl.appendChild(newEl);
  var position = markerEl.object3D.getWorldPosition();
  position.y = 0.5;
  newEl.setAttribute('position', position);
});

Codepen：https://codepen.io/donmccurdy/pen/QOOXbK?editors=1010

在实时a-frame相机视图中动态添加对象

1 个答案: