ar-prototyping/08_3d/index.html at main · FH-Potsdam/ar-prototyping · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <script src="../assets/aframe/aframe-v1.2.0.min.js"></script>
    <script src="../assets/arjs/aframe-ar.js"></script>
    <script>
      AFRAME.registerComponent('mythreejsthing', {
        schema: {
          color: {
            default: '#000'
          },
        },

        update: function() {
          var material = new THREE.MeshBasicMaterial({
            color: this.data.color,
            wireframe: true
          });

          var geometry = new THREE.BoxGeometry(1, 1, 1);

          this.el.setObject3D('mesh', new THREE.Mesh(geometry, material));
        },

        tick: function (time, timeDelta) {
          this.el.object3D.rotation.x += 0.1 * Math.PI / 180;
        },

        remove: function() {
          this.el.removeObject3D('mesh');
        }
      });
    </script>
  </head>
  <body>
    <a-scene embedded arjs>
      <a-entity mythreejsthing="color: green;" position="0 1 -5"> </a-entity>
    </a-scene>
  </body>
</html>