ライブAフレームカメラビューでオブジェクトを動的に追加する

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