gpt4 book ai didi

javascript - setAttribute 之后无法更新组件

转载 作者:行者123 更新时间:2023-12-03 01:29:45 27 4
gpt4 key购买 nike

我正在尝试使用 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);
});
}

最佳答案

您的代码未正确更新组件。 API as described in the docs是:

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

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

关于javascript - setAttribute 之后无法更新组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51361119/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com