OpenGridHelper/example.html at main · OpenGeometry-io/OpenGridHelper · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <title>OpenGrid</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="OpenGrid">
  <meta name="author" content="Vishwajeet Mane">
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    #app {
      width: 100%;
      height: 100vh;
    }
  </style>
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.168.0/build/three.module.js",
        "OrbitControls": "https://unpkg.com/three@0.168.0/examples/jsm/controls/OrbitControls.js",
        "datGui": "https://unpkg.com/three@0.168.0/examples/jsm/libs/lil-gui.module.min.js",
        "OpenGrid": "./OpenGridHelper.js"
      }
    }
  </script>
</head>
<body>
  <div id="app" style="width: 100%; height: 100vh;">
  </div>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'OrbitControls';
    import { GUI } from 'datGui';
    import * as OpenGrid from 'OpenGrid';

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xebdbcc);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 10, 0);

    const renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("app").appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);

    const gridColor = hexToRgb(0x000000);
    const gridHelper = new OpenGrid.Grid("xzy", gridColor, 50, 25, true);
    scene.add(gridHelper);

    for (let i = 0; i < 10; i++) {
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff });
      const cube = new THREE.Mesh(geometry, material);
      const x = Math.floor(Math.random() * 50) - 25;
      const z = Math.floor(Math.random() * 50) - 25;
      cube.position.set(x, 0, z);
      scene.add(cube);
    }

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(10, 10, 0);
    scene.add(light);

    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });


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

    animate();


    function hexToRgb(hex) {
      const color = new THREE.Color(hex)
      return new THREE.Vector3(color.r, color.g, color.b)
    }

    const gridShader = {
      gridColor: 0x000000,
      visibleArea: 50,
      polkaSize: 3
    }

    const gui = new GUI();
    const gridFolder = gui.addFolder('Grid');
    gridFolder.addColor(gridShader, 'gridColor').onChange((value) => {
      const color = hexToRgb(value);
      OpenGrid.Shader.uniforms['lineColor'].value = color;
    });
    gridFolder.add(gridShader, 'visibleArea', 0, 100).onChange((value) => {
      OpenGrid.Shader.uniforms['visibleArea'].value = value;
    });
    gridFolder.add(gridShader, 'polkaSize', 2, 10).onChange((value) => {
      OpenGrid.Shader.uniforms['polkaSize'].value = value;
    });
  </script>
</body>
</html>