doverz.github.io/index.html at main · doverz/doverz.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<title>guaiguai</title>
<script type='text/javascript' src='/static/aframe.min.js'></script>

<!-- <script type='text/javascript' src="{{ url_for('static', filename='aframe.min.js') }}"></script> -->

<!-- <script type='text/javascript' src="{{ url_for('static', filename='ar-threex-location-only.js') }}"></script> -->
<script type='text/javascript' src='/static/ar-threex-location-only.js'></script>
<script type='text/javascript' src='/static/aframe-ar.js'></script>

<!-- <script type='text/javascript' src="{{ url_for('static', filename='aframe-ar.js') }}"></script> -->
</head>
<body>
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
    <a-camera look-controls gps-new-camera='gpsMinDistance: 10' position="0 100 500"></a-camera>
    <!-- <a-entity look-controls  gltf-model="/static/pic/guaiguai.gltf" scale="0.08 0.08 0.08" id="a-location" gps-new-entity-place="" ></a-entity> -->
    <!-- <a-nft
    type="nft"
    url='/static/pic/'
    smooth="true"
    smoothCount="10"
    smoothTolerance=".01"
    smoothThreshold="5" -->
    <a-entity position="1 45 450" rotation="-11 -90 0" gltf-model="/static/pic/guaiguai.gltf" scale="2 2 2" id="a-location" gps-new-entity-place="" ></a-entity>
    <a-entity position="-22 45 470"  rotation="-11 -90 0" gltf-model="/static/pic/pp.gltf" scale="2 2 2" id="a-location3" gps-new-entity-place="" ></a-entity>
    <a-entity position="23 45 470" rotation="-11 -90 0"  gltf-model="/static/pic/dd.gltf" scale="2 2 2" id="a-location4" gps-new-entity-place="" ></a-entity>
    <a-entity look-controls rotation="0 0 0" position="0 80 400" gltf-model="/static/pic/cat.gltf" scale="0.2 0.2 0.2" id="a-location2" gps-new-entity-place="" ></a-entity>
  <!-- </a-nft> -->
    <!-- <a-entity material='color: red' geometry='primitive: box'  id="a-location" gps-new-entity-place="" scale="10 10 10"></a-entity> -->
</a-scene>

<!-- latitude: 30.2907392; longitude: 120.0160768 -->
<script>
  window.onload = navigator.geolocation.getCurrentPosition(function(position) {
      var entity = document.getElementById('a-location')
      var entity2 = document.getElementById('a-location2')
      var entity3 = document.getElementById('a-location3')
      var entity4 = document.getElementById('a-location4')
      const randomValue = Math.random() < 0.5 ? 1 : -1;
      const randomValue2 = Math.random() < 0.5 ? 1 : -1;
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      console.log(latitude+" "+longitude);
      entity.setAttribute('gps-new-entity-place', 'latitude: '+latitude+';' +'longitude:' + longitude);
      entity2.setAttribute('gps-new-entity-place', 'latitude: '+(latitude+randomValue*0.0008)+';' +'longitude:' + (longitude+randomValue2*0.0008));
      entity3.setAttribute('gps-new-entity-place', 'latitude: '+(latitude)+';' +'longitude:' + (longitude-0.0005));
      entity4.setAttribute('gps-new-entity-place', 'latitude: '+(latitude)+';' +'longitude:' + (longitude+0.0005));
    });
    </script>
</body>
</html>