设置属性后无法更新组件

Question

我正在尝试使用 object3D.lookAt 属性更改图像的视角。目前我正在尝试使用组件的 update() 方法更改图像的方向。这是通过更新我的组件的 lookat 属性来实现的。

function initCameras(cameras) {                                  
  cameras.forEach(camera => {                                    
    let el = document.createElement('a-entity');                 
    el.setAttribute('vp-cam', 'position: ' + camera.position);   
    el.setAttribute('id', camera.id);                            
    sceneEl.appendChild(el);                                     
  });                                                            
} 

这是启动组件的代码（这是正确的方式吗，我是A-Frame的新手）

这是组件代码：

AFRAME.registerComponent('vp-cam', {                                                  
  schema: {                                                                           
    radius: {default: 1, min: 0},                                                     
    segments: {default: 32, min: 3, type: 'int'},                                     
    thetaLength: {default: 360, min: 0},                                              
    thetaStart: {default: 0},                                                         
    id: {type: 'string', default: 'camera'},                                          
    position: {type: 'vec3', default: {x: 0, y: 0, z: 0}},                            
    lookat: {type: 'vec3', default: {x: 0, y: 0, z: 0}},                              
  },                                                                                  

  /**                                                                                 
   * Initial creation and setting of the mesh.                                        
   */                                                                                 
  init: function() {                                                                  
    let data = this.data;                                                             
    let el = this.el;                                                                 

    //Camera Id                                                                       
    this.id = data.id;                                                                

    // Create geometry.                                                               
    this.geometry = new THREE.CircleGeometry(                                         
      data.radius,                                                                    
      data.segments,                                                                  
      degToRad(data.thetaStart),                                                      
      degToRad(data.thetaLength),                                                     
    );                                                                                

    // Create texture.                                                                
    this.texture = new THREE.TextureLoader().load('assets/img/cam.png');              

    // Create material.                                                               
    this.material = new THREE.MeshBasicMaterial({map: this.texture});                 

    // Create mesh.                                                                   
    this.mesh = new THREE.Mesh(this.geometry, this.material);                         

    // Set mesh on entity.                                                            
    el.setObject3D('mesh', this.mesh);                                                

    // Change position                                                                
    el.object3D.position.set(data.position.x, data.position.y, data.position.z);      

    //Look at camera                                                                  
    let camera = document.getElementById('cursor-main');                              
    let cameraPos = camera.object3D.position;                                         
    el.object3D.lookAt(cameraPos);                                                    
  },                                                                                  
  update: function(oldData) {                                                         
    console.log('updateFunction called: ', oldData);                                  
  },  

这是在我目前的思维模式下应该触发更新的代码：

function adjustCameraRotations(target) {                           
  console.log('target: ', target);                                 
  let activeViewPoints = document.querySelectorAll('[vp-cam]');    
  activeViewPoints.forEach(camera => {                             
    console.log('target.position:', target.position);              
    camera.components.setAttribute('lookat', target.position);     
    console.log('iteration camera: ', camera);                     
  });                                                              
}     

Answer 1

您的代码未正确更新组件。 APIas described in the docs 是：

cameraEl.setAttribute('vp-cam', {lookat: target.position});

您还需要等待场景加载，以便组件开始触发update 方法，如this question 中所述