CODEWITHSUNDEEP
javascriptreactjsaframeaframe-networked
memokey
memokey

Reputation: 61

An issue when I use aframe in react.js

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.

Upvotes: 1

Views: 465

Answers (1)

user18042077
user18042077

Reputation: 11

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>

Upvotes: 1

Related Questions