加载页面时，Aframe 相机与装备断开连接

Question

我是Aframe的新手，遇到了一个我无法解决的问题。加载我的 Glitch 页面时，相机有时会以某种方式与钻机（播放器）头部断开连接。我一直在寻找可能导致此问题的原因，但我只在将渲染凸轮子项添加到主相机时才看到这种情况（因为小地图）。

在控制台中我只有一个警告：

three.js:3184 THREE.Box3: .getCenter() target is now required
e.getCenter @ three.js:3184

我正在为第二个摄像头（小地图）使用这个组件： https://github.com/jgbarah/aframe-playground/tree/master/camrender-01

有什么提示或建议吗？

谢谢。

代码：

<a-assets>
   <canvas id="cam2" position="0 0 0"></canvas>
</a-assets>
<a-entity id="bodyOfPlayer"> 
         <a-entity   
                    id="rig"        
                    position = "0 0 0"
                    rotation="0 0 0"
                    movement-controls   
                    gaze-interaction  
                    kinematic-body
                    >
                  //this camera I always need to have active because it is main camera of player in first person
                  <a-entity
                            id="headOfPlayer"
                            camera 
                            position="0 1.6 0"
                            rotation="0 0 0"
                            look-controls="pointerLockEnabled:false"                          
                            >                  
                             
                             <a-sphere class="head" visible="true" random-color></a-sphere>
                    
                             <a-circle position="-1.2 0.58 -1" rotation="0 0 0" scale="0.2 0.2 0.2" width="0.41" height="0.41"
                             material="src:#cam2; opacity: .95" canvas-updater></a-circle>
                             <a-image src="#map" position="-1.2 0.58 -1" width="0.53" height="0.53"></a-image>
                        
                             <a-entity class="rayhead" cursor raycaster="objects: .clickable; showLine: true; far: 500" line="color: white; opacity: 1" position="0 0 0" visible="false"></a-entity> 
                            <a-entity cursor="fuse: false" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" position="0 0 -1"></a-entity> 
                  </a-entity>
          //this camera is just for minimap -> not active one, it is view from top on player in fixed canvas on screen
           <a-entity camera="active: false" camrender="cid: cam2" position="0 15 0" rotation="-90 0 0"></a-entity>
         </a-entity>
      </a-entity>

Answer 1

您可能正在点击 this issue，其中 <a-scene> 和 camera 实体之间的 <template> 或 <script> 标记会干扰预期行为。

重现很容易：

上面注入了默认摄像头，你有两个摄像头。现在，如果你向上移动它：

没有额外的摄像头。符合预期。

向上移动相机几乎是一种“解决方法”，您也可以尝试像 ajai 建议的那样进行预加载，或者在场景加载后删除默认相机（链接问题中的 Diarmid McKenzies 代码）：

// grab the scene
const sceneEl = document.querySelector('a-scene')
// if the camera id is not matching our camera
if (sceneEl.camera.el.id !== 'headOfPlayer') {    
    console.log("Deleting unwanted A-Frame default camera")
    const wrongCameraEntity = this.el.sceneEl.camera.el;
    const cameraEntity = document.getElementById('headOfPlayer');
    cameraEntity.setAttribute('camera', 'active', true); // activate our camera
    wrongCameraEntity.parentEl.removeChild(wrongCameraEntity); // remove the other one
}

加载页面时，Aframe 相机与装备断开连接

Aframe camera disconnects from rig when page is loaded

javascript

aframe