我发现 aframe-react 与 A-Frame-School 编码相比非常不同,尤其是在脚本方面。我可以制作所有实体并使用基本组件,但是如果我想调整像这样的脚本怎么办?:
<script>
AFRAME.registerComponent('score-counter', {
schema: {
el: {
type: 'selector'
},
score:{
type: 'int',
default: 0
},
},
init: function () {
var sceneEl = document.querySelector('a-scene');
var scoreBoard = document.querySelector('#score');
sceneEl.querySelector('a-box').addEventListener('mouseenter', () => {
this.data.score++;
var newScore = 'Score: ' + this.data.score
scoreBoard.setAttribute('text', 'value', newScore)
})
}
});
</script>
我将此作为有效的 a-frame-react 代码的示例,但找不到如何适应这一点:
import React from 'react';
import { Entity } from 'aframe-react';
import WinLine from './win-line'
const SYMBOL_COUNT = 12;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
class Bonus extends React.Component {
constructor(props) {
super(props)
var symbols = [];
var house = [];
for (var s = 0; s < SYMBOL_COUNT; ++s) {
house.push({ s: getRandomInt(0, 3), x: s * 9, k: "sym-" + s });
}
symbols.push(house);
this.state = {
symbols: symbols
};
}
bonus() {
setTimeout(() => this.props.main.typeBonusA(), 6500);
}
render() {
if (this.props.modeI === "in") {
return (null)
}
else if (this.props.clip === "mon") {
return (
{this.bonus()}
</Entity>
)
}
else {
return (
<WinLine symbols={this.props.symbols} />
)
}
}
}
export default Bonus
...等(代码被删除)
在之前的回答中,人们给出了 JS 代码,但我不知道该把它放在哪里。
有人可以告诉我如何将 -code “移植”到 aframe-react 编码风格吗?或者aframe-react中正确的脚本编写方式,或者建议,任何线索都将受到感谢。
最佳答案
您可以将您的 registerComponent 代码放置在其自己的模块中。
例如,您可以将代码放在 aframe-helper.js
import AFRAME from 'aframe';
AFRAME.registerComponent('score-counter', {...});
然后在应用程序的入口点导入该模块。
import 'aframe-helper'
关于javascript - 使用 aframe-react 的 A-Frame 编码风格制作脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48232745/