threejs_model_viewer/test.html at main · diskhkme/threejs_model_viewer · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>CAD Viewer Test</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
      }
      #viewer-container {
        width: 800px;
        height: 600px;
        border: 1px solid #ccc;
      }
      #test-controls {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div id="test-controls">
      <button onclick="loadModel('/test_models/Duck.glb')">Duck 로드</button>
      <button onclick="loadModel('/test_models/Box.glb')">Box 로드</button>
      <button onclick="loadModel('/test_models/Box_Student.glb')">
        Student Box 로드
      </button>
      <hr />
      <button onclick="loadModel('/test_models_CAD/a/a0.stl')">CAD A0 (STL) 로드</button>
      <button onclick="loadModel('/test_models_CAD/a/a1.stl')">CAD A1 (STL) 로드</button>
      <button onclick="loadModel('/test_models_CAD/a/a2.stl')">CAD A2 (STL) 로드</button>
      <br />
      <button onclick="loadModel('/test_models_CAD/b/b0.stl')">CAD B0 (STL) 로드</button>
      <button onclick="loadModel('/test_models_CAD/b/b1.stl')">CAD B1 (STL) 로드</button>
      <button onclick="loadModel('/test_models_CAD/b/b2.stl')">CAD B2 (STL) 로드</button>
      <hr />
      <button onclick="loadModel('/test_models_CAD/a/diff_a0_a2_sdf_v2.stl')" style="background-color: #4CAF50; color: white; font-weight: bold;">CAD A0-A2 로드</button>
      <hr />
      <button onclick="unloadModel()">모델 언로드</button>
      <hr />
      <button onclick="testCSG()">CSG 테스트</button>
    </div>

    <iframe id="viewer-container" src="/"></iframe>

    <script>
      // Bubble.io의 메시지 전송을 시뮬레이션
      function loadModel(modelUrl) {
        const iframe = document.getElementById("viewer-container");
        // modelId를 URL에서 추출하거나 기본값 사용
        const modelId = modelUrl.split('/').pop()?.split('.')[0] || 'default';
        iframe.contentWindow.postMessage({ type: "loadModel", modelUrl, modelId }, "*");
      }

      // 모델 언로드 함수 추가
      function unloadModel() {
        const iframe = document.getElementById("viewer-container");
        iframe.contentWindow.postMessage({ type: "unloadModel" }, "*");
      }

      // CSG 테스트 함수 추가
      function testCSG() {
        const iframe = document.getElementById("viewer-container");
        iframe.contentWindow.postMessage({ type: "testCSG" }, "*");
      }

      // 뷰어로부터의 메시지 수신
      window.addEventListener("message", function (event) {
        if (event.data && event.data.type === "modelLoaded") {
          console.log("모델 로드 상태:", event.data.success);
          if (!event.data.success) {
            console.error("에러:", event.data.error);
          }
        } else if (event.data && event.data.type === "modelUnloaded") {
          console.log("모델 언로드 완료");
        }
      });
    </script>
  </body>
</html>