3jsPlay/index-threejs.html at master · satyasinha/3jsPlay · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>WSN Augmented Reality Grid Playground</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        font-family: Monospace;
        background-color: #f0f0f0;
        margin: 0px;
        overflow: hidden;
      }
    </style>

  </head>
  <body>
    <script src="three.min.js"></script>
    <script src="js/renderers/Projector.js"></script>
    <script src="js/renderers/CanvasRenderer.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <script src="js/controls/TrackballControls.js"></script>

    <script>

      var container, stats;

      var camera, scene, renderer;

      var controls;

      var cube;

      init();
      animate();

      function init() {
        container = document.createElement('div');
        document.body.appendChild(container);

        var info = document.createElement('div');
        info.style.position = 'absolute';
        info.style.top = '10px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.innerHTML = 'This is a cube';
        container.appendChild(info);

        // camera
        camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 10000);
        camera.position.set(500, 800, 1300);

        // scenes
        scene = new THREE.Scene();
        var size = 500, step = 50;

        var geometry = new THREE.Geometry();

        for ( var i = - size; i <= size; i += step ) {
          geometry.vertices.push( new THREE.Vector3(- size, 0, i));
          geometry.vertices.push( new THREE.Vector3(size, 0, i));
          geometry.vertices.push( new THREE.Vector3(i, 0, - size));
          geometry.vertices.push( new THREE.Vector3(i, 0,   size));
        }

        var material = new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2});

        var line = new THREE.Line(geometry, material, THREE.LinePieces);
        scene.add(line);

        // controls
        controls = new THREE.TrackballControls(camera);

        // renderer
        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        // stats
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild(stats.domElement);

        // events
        window.addEventListener('resize', onWindowResize, false);
      }

      // resize event
      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      // animation
      function animate() {
        requestAnimationFrame(animate);
        render();
        stats.update();
      }

      function render() {
        controls.update();
        renderer.render(scene, camera);
      }

    </script>
  </body>
</html>