vue2+three.js做出一个精美的3D地图——4.在地图上添加模型或者精灵sprite

原创

已于 2023-12-18 15:44:49 修改 · 2.6k 阅读

标签

#javascript #3d #开发语言

于 2023-10-23 14:17:41 首次发布

本文介绍了如何在three.js中引入外部模型（如故宫模型），使用GLTFLoader加载并定位模型，添加精灵（Sprite）以及设置光源，以实现3D地图的丰富内容展示。

文章目录

前言
- - - 代码地址： https://gitee.com/txcst/3-dmap.git 只想好好做开源。
一、如何引入外部模型
二、添加sprite（精灵）
总结

前言

代码地址： https://gitee.com/txcst/3-dmap.git 只想好好做开源。

上一期我们已经把地图构建好了，现在我们给地图添加一些模型和精灵

一、如何引入外部模型

1.three.js想要使用模型，需要使用加载器，它本身内置了很多加载器，在 ‘three/examples/jsm/loaders/’ 地址下，可以根据自己的需要去找，简单介绍几个常用的加载器，

TextureLoader()，纹理加载器，加载一张图片，返回的是纹理
GLTFLoader()，gltl模型加载器，会返回一个gltf模型对象，
FileLoader()，文件加载器，返回字符串

2.加载模型，打算在北京放置一个故宫的模型，在sketchfab白嫖了一个免费的模型，我们把他下载到本地，现在我们要开始处理两件事

获取北京的地图坐标
引入模型放置到北京的坐标上

先获取坐标

我们来到generateGeometry方法，再循环坐标处，增加一个筛选，添加到special数组里

 jsondata.features.forEach((elem) => {
   
   
          if (
            elem.properties.name == "陕西省" ||
            elem.properties.name == "北京市"
          ) {
   
   
            let obj = {
   
   
              name: elem.properties.name,
              arr: [projection(elem.properties.center)],
            };
           special.push(obj);
          }

引入模型

import {
   
    GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

注意，gltf模型的scene是我们要使用到，我们调整模型的坐标轴和角度和大小，使他贴到地图上，然后加到地图的map对象里，记住要加到地图的对象里，不要直接加在scene里，这样会使坐标对不上

position：模型坐标方位
rotation：模型的角度
scale：模型的大小

  //获取故宫的模型
    GetGLTFLoader

最低0.47元/天解锁文章