genesisdotre.github.io/index-Android.html at master · genesisdotre/genesisdotre.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <title>genesis.re 🦄</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="https://genesis.re/cmdctrl/cmdctrl.js"></script>
    <link rel="stylesheet" href="www/main.css">

    <meta property="og:title" content="genesis.re 🦄"/>
    <meta property="og:image" content="https://genesis.re/www/images/metatron.png"/>
    <meta property="og:site_name" content="hackers of planets"/>
    <meta property="og:description" content="technology, permaculture, sustainability, community, tribe, village, enlightenment, love and light, ninjas, pirates, unicorns"/>

  </head>
  <body>

    <div class="box header">
        <a style="margin-bottom:10px; display: inline-block;" href="https://genesis.re/wiki">genesis.re/wiki</a><br>
        <a style="margin-bottom:10px; display: inline-block;" href="mailto:email@genesis.re">email@genesis.re</a><br>
        <span style="margin-bottom:10px; display: inline-block;">architecting the new planet</span><br>
        supporting <a href="https://astralship.org">astralship.org</a>

    </div>

    <div class="box credits">
        artwork by <a href="https://www.facebook.com/AndroidJonesart/photos/a.153787984205.112648.153708179205/10154722439949206/?type=3&theater">Android Jones</a>
    </div>

    <div id="canvas">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.min.js"></script>
    <script>

      THREE.ImageUtils.crossOrigin = '';

      var init = true;
      var pressed = false;
      var target; // saving the mouse down target - to be clicked after releasing... (fixing a bug with touch on mobile)
      var timeout; // after 20 seconds of inactivity we re-enable rotation... (best guess about web usability)

      var longitude = 0;
      var latitude = 0;
      var savedX;
      var savedY;
      var savedLongitude;
      var savedLatitude;

      // setting up the renderer
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById("canvas").appendChild(renderer.domElement); // append either here or to the body

      // creating a new scene
      var scene = new THREE.Scene();

      // adding a camera
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
      camera.target = new THREE.Vector3(0, 0, 0);

      // creation of a big sphere geometry
      var sphere = new THREE.SphereGeometry(100, 100, 40);
      sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

      // creation of the sphere material
      var sphereMaterial = new THREE.MeshBasicMaterial();
      sphereMaterial.map = THREE.ImageUtils.loadTexture("https://i.imgur.com/89m76z9.jpg")

      // geometry + material = mesh (actual object)
      var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
      scene.add(sphereMesh);

      // listeners
      document.addEventListener("mousedown", onDocumentMouseDown, false);
      document.addEventListener("mousemove", onDocumentMouseMove, false);
      document.addEventListener("mouseup", onDocumentMouseUp, false);


      document.addEventListener("touchstart", onDocumentMouseDown, false);
      document.addEventListener("touchmove", onDocumentMouseMove, false);
      document.addEventListener("touchend", onDocumentMouseUp, false);

      render();

      function render(){
        requestAnimationFrame(render);

        if(init){
          longitude += 0.1;
        }

        // limiting latitude from -85 to 85 (cannot point to the sky or under your feet)
        latitude = Math.max(-85, Math.min(85, latitude));

        // moving the camera according to current latitude (vertical movement) and longitude (horizontal movement)
        camera.target.x = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.cos(THREE.Math.degToRad(longitude));
        camera.target.y = 500 * Math.cos(THREE.Math.degToRad(90 - latitude));
        camera.target.z = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.sin(THREE.Math.degToRad(longitude));
        camera.lookAt(camera.target);

        // calling again render function
        renderer.render(scene, camera);
      }

      // when the mouse is pressed, we switch to manual control and save current coordinates
      function onDocumentMouseDown(event){
        event.preventDefault();

        target = event.target;
        init = false;
        pressed = true;

        savedX = event.targetTouches ? event.targetTouches[0].clientX : event.clientX;
        savedY = event.targetTouches ? event.targetTouches[0].clientY : event.clientY;

        savedLongitude = longitude;
        savedLatitude = latitude;
      }

      // when the mouse moves, if in manual contro we adjust coordinates
      function onDocumentMouseMove(event){
        var clientX = event.targetTouches ? event.targetTouches[0].clientX : event.clientX;
        var clientY = event.targetTouches ? event.targetTouches[0].clientY : event.clientY;

        if(pressed){
          longitude = (savedX - clientX) * 0.1 + savedLongitude;
          latitude = (clientY - savedY) * 0.1 + savedLatitude;
        }
      }

      function onDocumentMouseUp(event) {
         pressed = false;
         if (target === event.target && target.href) {
           target.click();
         }
      }

      window.addEventListener('resize', function(event){
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight; // http://threejs.org/docs/#Reference/Cameras/PerspectiveCamera
        camera.updateProjectionMatrix();
      });

    </script>

  </body>
</html>