Three.js项目 智慧城市(四)

概述

如有不明白的可以加QQ：2354528292；wx: aichitudousien
更多教学视频请访问：https://space.bilibili.com/236087412

我们接着上一篇文章接着向下做，此时我们已经成功创建了场景，加载模型和天空盒，车流，现在我们来创建一些文本，效果

智慧城市项目录制视频

科技风版本：

智慧城市二期视频

创建文本

想要创建文本，我这边使用得方案是canvas贴图，当然使用css3DRender这些都可以

1. 首先我们先创建html

<div class="sprite-canvas">
    <span class="sprite-layer">${name}</span>
</div>

<style lang="less">
.sprite-canvas {
  position: absolute;
  width: 1024px;
  height: 1024px;
  font-size: 128px;
  top: 0;
  box-sizing: border-box;
  background-color: transparent;
  color: #fff;
  text-align: center;
  .sprite-layer {
    margin-top: 60%;
    background-color: blue;
    padding: 1% 2%;
  }
}
</style>

2. 使用htmlCanvas来创建成canvas

export function createSprite(group, name, position) {
  const html = `
                    <div class="sprite-canvas">
                        <span class="sprite-layer">${name}</span>
                    </div>`;

  document.body.insertAdjacentHTML("beforeend", html);
  const element = document.body.lastChild;
  element.style.zIndex = -1;
  html2canvas(element, {
    backgroundColor: "transparent"
  }).then(canvas => {
    let texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;

    let spriteMaterial = new THREE.SpriteMaterial({
      map: texture
    });
    let sprite = new THREE.Sprite(spriteMaterial);
    sprite.name = name;
    sprite.position.set(...position);
    sprite.scale.set(60, 60, 60);
    group.add(sprite);
    document.body.removeChild(element);
  });
}

3. 导入数据创建精灵贴图

address.forEach((item) => {
        createSprite(cavasHtmlGroup, item.name, item.position);
      });

此时看到得效果是

4. 最后添加上小精灵飞行调用函数

// 点击精灵飞行
      app.initRaycaster((obj) => {
        if (obj.isSprite) {
          address.forEach((item) => {
            if (item.name === obj.name) {
              app.flyTo({
                position: item.cameraPosition,
                duration: 1500,
              });
            }
          });
        }
      });

完成最后效果！
在结尾我们在添加一些报表和标题来丰富我们得场景，这个就不一一写了，本此项目就结束了！