【发布时间】：2019-05-09 07:10:15
【问题描述】：
使用项目从 A-FRAME 8 升级到 9 的问题。升级的原因是由于使用 addEventListener 注册组件的鼠标单击不一致。它只是不一致，但迁移到版本 9 似乎纠正了这个问题，但代价是破坏了项目的其余部分。
动画不起作用，在检查器模式下我无法移动对象或相机，但元素确实出现在检查器模式下，您只是无法选择 xyz 箭头来移动它们。
我想知道是否有其他人在从 A-FRAME 版本 8 迁移到 9 时遇到上述类似问题？
最接近的例子是下面的代码。如果将其更改为 A-FRAME 的第 9 版，则没有任何效果，但第 8 版没问题。我找不到我的标记和 A-FRAME 文档之间的任何明显差异。还有其他人吗？
重新创建每个元素似乎都可以工作，但是检查器中的相机定位不起作用，无法查看相机角度的样子，并且使用 OBJ 和 MTL 文件添加对象仅显示对象的轮廓，而使用第 8 版，一切正常 100%。
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('cursor-hotpsot-1', {
init: function () {
var COLORS = ['purple', 'green', 'blue'];
this.el.addEventListener('click', function (evt) {
var randomIndex = Math.floor(Math.random() * COLORS.length);
this.setAttribute('material', 'color', COLORS[randomIndex]);
console.log('Clicked:' + this);
});
}
});
</script>
<a-scene class="fullscreen"
inspector=""
keyboard-shortcuts=""
screenshot=""
vr-mode-ui="enabled: false"
cursor="rayOrigin: mouse">
<!--
<a-camera active="true" spectator="true"
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false"
zoom="2.4"
position="0.3 0.0 -1.8"
rotation="0.0 132.5 0.0"
camera="zoom:1.5"
look-controls=""
camera="active:true"
data-aframe-inspector-original-camera=""
look-controls="enabled: false"></a-camera>
-->
<a-obj-model id="diagram"
position="-0.8 0 -3.5"
scale="0.2 0.2 0.2"
shadow=""
rotation="-90 180 0"
material="metalness: .5; src: #issTexture; src: #issTexture; " obj-model=""
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false">
<!-- CURSOR HOTSPOTS -->
<!-- TOP RIGHT -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="-3.5 0.1 2.0"
scale="0.250 0.250 0.250"
color="red"
id="hotspot_tr"></a-sphere>
<!-- BOTTOM LEFT -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="3.3 0.1 -2.3"
scale="0.250 0.250 0.250"
color="green"
id="hotspot_bl"></a-sphere>
<!-- CENTER TOP -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="-0.040 0.1 0.1"
scale="0.250 0.250 0.250"
color="blue"
id="hotspot_ct"></a-sphere>
</a-obj-model>
<a-camera active="true" spectator="true"
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false"
zoom="2.4" position="0.28042 0.01891 -1.85751"
camera="zoom:1.5"
look-controls=""
camera="active:true"
data-aframe-inspector-original-camera=""
look-controls="enabled: false">
<a-animation attribute="position"
dur="2500"
fill="forwards"
from="0.2058 0.29058 -1.96409"
to="0 0 -1.5"
repeat="0">
</a-animation>
</a-camera>
</a-scene>
/////////////////////////////////////// //
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('cursor-hotpsot-1', {
init: function () {
var COLORS = ['purple', 'green', 'blue'];
this.el.addEventListener('click', function (evt) {
var randomIndex = Math.floor(Math.random() * COLORS.length);
this.setAttribute('material', 'color', COLORS[randomIndex]);
console.log('Clicked:' + this);
});
}
});
</script>
<a-scene class="fullscreen"
inspector=""
keyboard-shortcuts=""
screenshot=""
vr-mode-ui="enabled: false"
cursor="rayOrigin: mouse">
<!--
<a-camera active="true" spectator="true"
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false"
zoom="2.4"
position="0.3 0.0 -1.8"
rotation="0.0 132.5 0.0"
camera="zoom:1.5"
look-controls=""
camera="active:true"
data-aframe-inspector-original-camera=""
look-controls="enabled: false"></a-camera>
-->
<a-obj-model id="diagram"
position="-0.8 0 -3.5"
scale="0.2 0.2 0.2"
shadow=""
rotation="-90 180 0"
material="metalness: .5; src: #issTexture; src: #issTexture; " obj-model=""
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false">
<!-- CURSOR HOTSPOTS -->
<!-- TOP RIGHT -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="-3.5 0.1 2.0"
scale="0.250 0.250 0.250"
color="red"
id="hotspot_tr"></a-sphere>
<!-- BOTTOM LEFT -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="3.3 0.1 -2.3"
scale="0.250 0.250 0.250"
color="green"
id="hotspot_bl"></a-sphere>
<!-- CENTER TOP -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="-0.040 0.1 0.1"
scale="0.250 0.250 0.250"
color="blue"
id="hotspot_ct"></a-sphere>
</a-obj-model>
<a-camera active="true" spectator="true"
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false"
zoom="2.4" position="0.28042 0.01891 -1.85751"
camera="zoom:1.5"
look-controls=""
camera="active:true"
data-aframe-inspector-original-camera=""
look-controls="enabled: false">
<a-animation attribute="position"
dur="2500"
fill="forwards"
from="0.2058 0.29058 -1.96409"
to="0 0 -1.5"
repeat="0">
</a-animation>
</a-camera>
</a-scene>
查看带有 A-FRAME 版本 8 的示例将显示三个球体，它们将出现在屏幕左下方。版本 9 不会显示任何内容。我希望第 9 版能像第 8 版一样工作。
【问题讨论】：
标签： aframe