Three.js 如何复制摄影机子a帧实体的位置和旋转以在场景实体中使用？_Three.js_Aframe

Three.js 如何复制摄影机子a帧实体的位置和旋转以在场景实体中使用？

three.js aframe

Three.js 如何复制摄影机子a帧实体的位置和旋转以在场景实体中使用？,three.js,aframe,Three.js,Aframe,我想创建一个控制面板，当用户俯视时，它会出现在用户面前，但随后会将自身锁定到世界空间我正在创建一个占位符控制面板，然后将实际控制面板移动到此位置并旋转，但实际控制面板没有移动到占位符位置，而是停留在位置0 但是，如果我在控制台中手动执行该过程，它就会工作这就是我正在尝试的： <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.4.0/aframe.min.

我想创建一个控制面板，当用户俯视时，它会出现在用户面前，但随后会将自身锁定到世界空间

我正在创建一个占位符控制面板，然后将实际控制面板移动到此位置并旋转，但实际控制面板没有移动到占位符位置，而是停留在位置0

但是，如果我在控制台中手动执行该过程，它就会工作

这就是我正在尝试的：

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  <script>
    function createControlPanel() {

      var controlPanelPlaceHolder = document.createElement('a-plane');
      controlPanelPlaceHolder.setAttribute('id', 'control-panel-place-holder');
      document.querySelector('#me').appendChild(controlPanelPlaceHolder);
      document.querySelector('#control-panel-place-holder').setAttribute('width', '0.25');
      document.querySelector('#control-panel-place-holder').setAttribute('height', '0.15');
      document.querySelector('#control-panel-place-holder').setAttribute('position', '0.15 -0.05 -0.3');
      document.querySelector('#control-panel-place-holder').setAttribute('rotation', '-45 0 0');
      document.querySelector('#control-panel-place-holder').setAttribute('color', 'crimson');


      var controlPanel = document.createElement('a-plane');
      controlPanel.setAttribute('id', 'control-panel');
      controlPanel.setAttribute('width', '0.25');
      controlPanel.setAttribute('height', '0.15');
      controlPanel.setAttribute('color', 'teal');
      document.querySelector('a-scene').appendChild(controlPanel);

      document.querySelector('#control-panel-place-holder').object3D.updateMatrixWorld();

      document.querySelector('#control-panel').object3D.position.copy(
        new THREE.Vector3().setFromMatrixPosition(document.querySelector('#control-panel-place-holder').object3D.matrixWorld)
      )

      document.querySelector('#control-panel').object3D.quaternion.copy(
        document.querySelector('#control-panel-place-holder').object3D.getWorldQuaternion()
      )

      document.querySelector('#me').removeChild(document.querySelector('#control-panel-place-holder'));
    }

    document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('a-scene').addEventListener('loaded', createControlPanel);
    });

  </script>
</head>
<body>
  <a-scene debug>
    <a-entity id='me' camera='userHeight: 1.6' position='10 0 10' rotation='0 45 0' look-controls></a-entity>
  </a-scene>
</body>
</html>

你有没有想过为什么这不起作用

谢谢。

根据@ngokevin的建议，我已经将代码转移到组件并进行了重构

以下解决方案在用户俯视时在用户面前创建一个控制面板和十字线。面板保持在原位，以便他们可以使用十字线从中进行选择。如果他们抬头看，面板就会消失

//helper.js const q=document.querySelector.binddocument 函数setComponentDefaultscomponent{ 对于component.data中的attr component.el.setAttributeattr，component.data[attr] } //control-panel-skeleton.js AFRAME.registerComponent'control-panel-skeleton'{ 模式：{ 宽度：{默认值：'0.25'}，高度：{默认值：'0.15'} }, init：函数{ setComponentDefaultsthis } } //control-panel-place-holder.js A框架注册表组件“控制面板-定位器”{ 模式：{ id:{默认值：'控制面板占位符'}，位置：{default:'0-0.05-0.3'}，旋转：{默认值：'-45 0'}，可见：{default:'false'} }, init：函数{ setComponentDefaultsthis } } //control-panel.js 一个框架注册表组件“控制面板”{ 模式：{ id:{default:'控制面板'}，颜色：{default:'teal'} }, init：函数{ setComponentDefaultsthis 此.el.setAttribute'control-panel-skeleton'，常数cpHolder=q‘控制面板-定位支架’ 此.el.setAttribute'position'，cpHolder.object3D.getWorldPosition this.el.object3D.SetRotationFromQuaternionSpholder.object3D.getWorldQuaternion q“十字线”。设置属性“可见”，为真 }, 移除：=>q‘十字线’.setAttribute‘可见’，false } //control-panel-trigger.js 一个框架寄存器组件“控制面板触发器”{ init：函数{ 常数cp==>q‘控制面板’ 函数createIfLookingDowndetail{ 如果detail.newData.x<-25&&！cp{ const cp=document.createElement'a-plane' cp.setAttribute“控制面板”， q‘a场景’。请点击这里 } } 函数removeIfLookingUpdetail{ 如果detail.newData.x>-20&&cp cp.parentNode.removeChildcp } this.el.addEventListener'componentchanged'，evt=>{ 如果evt.detail.name==“旋转” createIfLookingDownevt.detail | | removeIfLookingUpevt.detail } } } //十字线 AFRAME.registerComponent“十字线”{ 模式：{ id:{default:'十字线'}，颜色：{default:'brown'}，游标：{default:'fuse:true'}，位置：{default:'0-0.1'}， “内部半径”：{默认值：'0.003'}， “外部半径”：{默认值：'0.0037'}，光线投射器：{default:'far:2'}，比例：{默认值：'1.71.7'}，可见：{default:'false'} }, init：函数{ setComponentDefaultsthis } }

您试图在尚未初始化的DOM元素上运行JavaScript。建议在组件中放置代码。好的，谢谢凯文。我来试一试。

Uncaught (in promise) TypeError: Cannot read property 'isPlaying' of null