第八墙为空，但在框架中不为空?

Question

所以，我试图得到一些文本在第八墙的位置，它一直错误为"null"但是当我在框架中记录相同的东西时，它工作得很好。

Aframe HTML &JS

//-- HTML
<a-text id="text" value="This my text" position="-1.5 4 -5" color="#000" scale="1.5 1.5 1.5"></a-text>
//-- JS
const text = document.querySelector('#text');
console.log(text)

第八墙HTML &JS

//-- HTML
<a-text id="text" value="This my text" position="0 0 0" color="#000" scale=".4 .4 .4"</a-text>

//-- JS
const text = document.querySelector('#text');
console.log(text)

Aframe给我

<a-text id="text" value="This is how text works!" position="-1.5 4 -5" color="#000" scale="1.5 1.5 1.5">

有更多信息的下拉菜单，但是第八面墙给了我这个

▼Uncaught TypeError: Cannot read property 'getAttribute' of null在对象。app.js: 15:26在webpack_require引导在(匿名)bootstrap在(匿名)dist_b10037af710deed478c4f4e425bebc2509497cc1-8e90da767df8e9b631034f88b9b150fc_bundle.js

Answer 1

没关系，我解决了!

当你从your-component-file.js导出组件并将其导入到app.js中时，如果其他人遇到同样的问题，请确保你也在HTML

中将组件的名称添加到Scene中。就像这样我使用了text- animm。js和textAnimComponent

//-- in text-anim.js
const textAnimComponent = () => ({
init() {
// with all of your functions in here
},
})
export {textAnimComponent}
//-- in app.js
import {textAnimComponent} from './text-anim.js'
AFRAME.registerComponent('text-anim', textAnimComponent()) 

//-- in body.html
<a-scene
text-anim // note: here is where you add your component
xrextras-gesture-detector
xrextras-almost-there
xrextras-loading
xrextras-runtime-error
renderer="colorManagement:true"
xrweb="disableWorldTracking: true">
// with all of your other entities
</a-scene>