When I use aframe in react.js, there is a problem. I can't connect camera or wasd-control, look-controls in my player entity.
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene>
<a-assets>
<img id="sechelt" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<template id="avatar-template">
<a-sphere color="yellow" radius="5"></a-sphere>
</template>
</a-assets>
<a-entity
id="player"
class="heads"
networked="template:#avatar-template;attachTemplateToLocal:false;"
camera
position="0 1.6 0"
wasd-controls
look-controls
></a-entity>
<a-sky id="image-360" radius="100" src="#sechelt" data-set-image-fade-setup="true" animation__fade=""></a-sky>
</a-scene>It is working well in HTML file. only when I try it in react.js, I can't control player entity. then new entity which has camera, wasd-controls and look-controls is created so I can't control player entity.
You should write the <script src="" tag below all the code
<a-scene>
<a-assets>
<img id="sechelt" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<template id="avatar-template">
<a-sphere color="yellow" radius="5"></a-sphere>
</template>
</a-assets>
<a-entity
id="player"
class="heads"
networked="template:#avatar-template;attachTemplateToLocal:false;"
camera
position="0 1.6 0"
wasd-controls
look-controls
></a-entity>
<a-sky id="image-360" radius="100" src="#sechelt" data-set-image-fade-setup="true" animation__fade=""></a-sky>
</a-scene>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>