Cuando uso aframe en react.js, hay un problema. No puedo conectar la cámara o el control wasd, los controles de mirada en mi entidad de jugador.
<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>Está funcionando bien en el archivo HTML. solo cuando lo intento en react.js, no puedo controlar la entidad del jugador. luego se crea una nueva entidad que tiene cámara, controles wasd y controles de mirada, por lo que no puedo controlar la entidad del jugador.
Debes escribir la etiqueta <script src="" debajo de todo el código
<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>