encounter/test.html at master · air/encounter · 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
<!doctype html>
<html lang="en">

<head>
  <title>Three.js Test Scene</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

  <!-- Import map for three.js -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js"
      }
    }
  </script>

  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000000;
    }
  </style>
</head>

<body>
  <!-- Load THREE globally from module -->
  <script type="module">
    import * as THREE from 'three';
    window.THREE = THREE;
  </script>

  <!-- Main ES6 module entry point -->
  <script type="module">
    import * as MY3 from './js/modules/MY3.js';

    // Expose MY3 to global scope for console access
    window.MY3 = MY3;

    // Initialize 3D renderer, camera, and scene
    MY3.init3d();

    // Add axes helper (red=X, green=Y, blue=Z)
    MY3.addHelpers();

    // Add a test line from origin to (100, 100, 100)
    const o = new THREE.Vector3(0, 0, 0);
    const p = new THREE.Vector3(100, 200, 300);
    const line = new MY3.Line(o, p);
    MY3.getScene().add(line);
    // markers
    MY3.markerAt(0, 0, 0);
    MY3.markerAt(100, 200, 300);

    // Position camera to see the axes and line
    const camera = MY3.getCamera();
    camera.position.set(300, 400, 500);
    camera.lookAt(0, 0, 0);

    // Start animation loop (no update callback, just render)
    MY3.startAnimationLoop();

    console.log('Test scene loaded - you should see axes helpers (red=X, green=Y, blue=Z)');
    console.log('Plus a colored test line with markers');
    console.log('MY3 is available in the console');
  </script>
</body>

</html>