javascript - 设置属性后无法更新组件
问题描述
我正在尝试使用 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);
});
}
解决方案
推荐阅读
- django - 生成AZ,链接到同一个ClassBasedView并进行搜索
- flutter - Flutter 自定义画家类
- html - 在滑块中拟合视频(Bootstrap 4.0)
- linux - 对现有或已安装的根文件系统进行加密
- python - Python递归打印嵌套哈希
- scala - 了解 Stream Scala 交错转换行为
- php - 当我添加另一个 php 站点时,该站点被重定向到另一个 php 站点,我没有编写重定向 .conf 文件。发生了什么事?
- linux - “权限被拒绝”时如何显示图像
- spring - java.lang.IllegalStateException:当前没有用户登录
- android - 使用 gradle 构建时将环境变量传递给 cmake