基于豆包MarsCode 和 Threejs 实现3D地图可视化

作者：Sword99

 

前言

本人前端吗喽一枚, 自从21年毕业后就来到了杭州工作，在杭州也待了3年多了，节假日偶尔也会去杭州省内其他城市旅游，偶尔刷掘金看到 豆包MarsCode，刚好来试用体验一下并结合Threejs实现了浙江省内旅游景点的3D可视化展示(文章末尾会放源码地址)。

项目预览：

• 本项目使用 MarsCode IDE 开发
• 在线预览地址

一. 项目初始化

使用 html/css/js 模版。

项目初始化详情(默认安装了vite)，点击顶部运行按钮或使用命令行npm run start即可启动项目。

安装项目依赖, package.json概览。

{
  "name": "web-test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "vite --host --port=8000"
  },
  "devDependencies": {
    "vite": "^5.2.12",
    "vite-plugin-full-reload": "^1.1.0"
  },
  "dependencies": {
    "d3": "^7.9.0",
    "three": "^0.169.0"
  }
}

二. 代码实现

1. threejs 初始化配置

初始化场景，限制一下control的旋转角度，别的较为基础，没啥好说的。

    const renderer = new THREE.WebGLRenderer({
        antialias: true,
        canvas: document.querySelector('#container'),
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);

    const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        500,
    );
    const initYDistance = 370;
    camera.position.set(0, initYDistance, 250);
    camera.lookAt(0, 0, 250);

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