Merge3DExample-JS/mapthree.html at master · threelab/Merge3DExample-JS · 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
<!--
 * @author: cyc
 * @copyright:
 * @see:
 * @version:
 * @tutorial:
 * @since:
 * @summary:
 * @file:
 * @license:
 * @Date: 2024-02-29 15:57:25
 * @LastEditTime: 2025-03-12 13:41:25
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>影像地图</title>
    <script src="./lib/proj4/proj4.js"></script>
    <script src="./lib/Cesium/Cesium.js"></script>
    <link rel="stylesheet" type="text/css" href="./Merge3D.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="./lib/Cesium/Widgets/widgets.css"
    />
  </head>

  <body>
    <div>
      <div id="app" class="app">
        <div id="cesiumContainer" class="cesiumContainer"></div>
      </div>
    </div>
    <script type="module">
      import { Merge3D, PointCloudLayer, cesiumThree } from "./Merge3D.js";
      import * as THREE from "./three.module.js";
      // 初始化场景
      let map = new Merge3D("app");
      let viewer = map.viewer;
      // 初始化地图
      let ct = new cesiumThree({
        renderer: viewer.renderer,
        viewer: map.viewer,
      });
      let cesiumViewer = ct.cesiumViewer;
      let scene = viewer.scene;
      // 定位
      scene.view.setView(
        [776207.483001709, 2935355.205001831, 1078.97],
        [776207.483001709, 2935355.20500183, 82.04]
      );

      // 添加three 中的方法
      const geometry = new THREE.BoxGeometry(100, 100, 100);
      const material = new THREE.MeshPhongMaterial({ color: 0x00ffff });
      const cube = new THREE.Mesh(geometry, material);
      cube.position.set(776207.483001709, 2935355.205001831, 50);
      map.add(cube);

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