Three.js 绘制他车参与物

除了自车，那智驾里最常见的参与物就是他车了，比如下面这种绿色长方体（图片源于百度 apollo），然后上面可能会携带一些文字信息

实现长方体

怎么做一个长方体？其实很简单，直接用内置几何体 BoxGeometry+EdgesGeometry 来实现，注意为了方便观察，这里要把 Mesh 做成透明的，绘制代码参考：

const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  // 注意这里要设置一下，否则opacity不会生效
  transparent: true,
  opacity: 0.2,
});
const geometry = new THREE.BoxGeometry(0.4, 0.4, 1);
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0.2, -2);
this.scene.add(mesh);
const edges = new THREE.EdgesGeometry(geometry);
const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const line = new THREE.LineSegments(edges, edgesMaterial);
line.position.copy(mesh.position);
this.scene.add(line);

ok 有点模样了。接下来封装下这个 Cube 类，先定个基础的数据接口：

interface ICube {
  id: number;
  // 他车类别，比如BUS、TRUCK等
  type: string;
  // IPos和IColor定义可以参照上一篇文章或者github代码里找
  position: IPos;
  color: IColor;
  width: number;
  height: number;
  length: number;
}

Cube 类参考如下：

// src/renderer/cube.ts
class Cube {
  scene = new THREE.Scene();

  constructor(scene: THREE.Scene) {
    this.scene = scene;
  }

  draw(data: ICube) {
    const { position, color, width, height, length } = data;
    const material = new THREE.MeshBasicMaterial({
      transparent: true,
      opacity: 0.2,
    });
    // 如果一定要用setRGB设置颜色，建议直接让上游先除以255再给到前端，咱前端能不计算就不要计算
    material.color.setRGB(color.r, color.g, color.b);
    const geometry = new THREE.BoxGeometry(width, height, length);
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(position.x, position.y, position.z ?? 0);
    this.scene.add(mesh);
    const edges = new THREE.EdgesGeometry(geometry);
    const edgesMaterial = new THREE.LineBasicMaterial();
    edgesMaterial.color.setRGB(color.r, color.g, color.b);
    const line = new THREE.LineSegments(edges, edgesMaterial);
    line.position.copy(mesh.position);
    this.scene.add(line);
  }
}

export default Cube;

顶部文字

他车其实携带了 id 和 type，为了直观看到这些属性，可以将他们绘制到对应的参与物顶部或其他容易观察的位置，可以用 TextGeometry 和 FontLoader 实现 3d 文字。font 字体文件直接到 threejs 的 github 仓库 下载一个，我直接放 public 里了

老规矩，先定个基础接口：

export interface IText {
  id: string;
  // 字体大小
  size: number;
  color: IColor;
  position: IPos;
  content: string;
}

绘制函数参考如下：

// src/renderer/text.ts
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";

let font: any = null;
const fontLoader = new FontLoader();
fontLoader.load("gentilis_regular.typeface.json", (res) => {
  font = res;
});

export function renderTextMesh(data: IText) {
  const { content, color = { r: 1, g: 1, b: 1 }, position, size = 0.1 } = data;
  const textGeo = new TextGeometry(content, {
    font,
    size,
    depth: 0.01,
  });
  textGeo.computeBoundingBox();
  const material = new THREE.MeshPhongMaterial();
  material.color.setRGB(color.r, color.g, color.b);
  const centerOffset =
    -position.x * (textGeo.boundingBox!.max.x - textGeo.boundingBox!.min.x);
  const textMesh = new THREE.Mesh(textGeo, material);
  textMesh.position.set(centerOffset, position.y, position.z || 0);
  textMesh.rotation.x = 0;
  textMesh.rotation.y = Math.PI * 2;
  return textMesh;
}

注意这里字体文件是异步加载的，在创建文字的时候需要先确保字体文件已经加载成功

然后怎么关联他车？注意 renderTextMesh 函数的返回值，在新建他车的时候，顺带新建一个 textMesh，并且在他车实例对象里保留这个 text 的引用，确保后续移除他车时能一并移除。在 cube 实例对象里追加下面的逻辑，具体位置看实际情况而定

// src/renderer/cube.ts
// ...
 draw() {
   // ...
   this.scene.add(line);
   // 绘制顶部文字
    const text = id + "-" + type;
    const textMesh = renderTextMesh({
      id: text,
      content: text,
      position: {
        x: mesh.position.x + width,
        y: mesh.position.y + height / 2 + 0.1,
        z: mesh.position.z,
      },
    });
    this.scene.add(textMesh);
  }

文字缓存

这里针对 textMesh 可以做个缓存，因为大部分情况下他车在好几帧里面是重复的，对应的顶部文字也是相对固定的，毕竟 3d 文字渲染相对比较耗时，可以借助缓存直接复用对应的 Mesh 对象。因为 id+type 是唯一标识，可以作为缓存对象的 key，参考代码如下：

type TextCache = Record<string, THREE.Mesh>;
class Cube {
  textCache: TextCache = {};
  // ...
  draw() {
    // ...
    if (this.textCache[text]) {
      const textMesh = this.textCache[text];
      mesh.textMesh = textMesh;
      group.add(textMesh);
    } else {
      // ...
    }
  }
}

朝向箭头

这里可以用官方的三角箭头，但如果对各个视角的观察要求不是很高的话，其实这里只需要二维箭头，可以用 Shape来实现，在大量他车的场景下对渲染还是有一点点提升的。这里先做成固定长度的就行了，主要是提供一个方向的参数，也作为一个接口直接让上游控制箭头的绘制

// src/renderer/arrow.ts
export interface IArrow {
  id: string;
  // 箭头尾部坐标，可以确定方向和长度
  endPoint: IPos;
  origin: IPos;
  length?: number;
  // 颜色哈希值
  hex?: string;
}

class Arrow {
  scene = new THREE.Scene();

  constructor(scene: THREE.Scene) {
    this.scene = scene;
  }

  draw(data: IArrow) {
    const arrowHelper = drawArrow(data);
    this.scene.add(arrowHelper);
  }
}

export default Arrow;

export function drawArrow(data: IArrow) {
  const { origin, endPoint, hex = 0xffff00 } = data;
  // 通过箭头起点和终点计算方向向量
  const dir = new THREE.Vector3(
    endPoint.x - origin.x,
    endPoint.y - origin.y,
    (endPoint.z ?? 0) - (origin.z ?? 0)
  );
  // 获取箭头长度
  const length = dir.length();
  const dirData = new THREE.Vector3(dir.x, dir.y, dir.z);
  dirData.normalize();
  const originPos = new THREE.Vector3(origin.x, origin.y, origin.z ?? 0);
  const arrowHelper = new THREE.ArrowHelper(dirData, originPos, length, hex);
  return arrowHelper;
}

其实可以把他车、文字和朝向箭头做成一个 Group，好处是减少 drawcall 和便于一起操作，比如移动、旋转和缩放等。Cube对象修改代码参考如下：

// src/renderer/cube.ts
  draw(){
    // ...
    // 绘制顶部文字
    const text = id + "-" + type;
    const textMesh = renderTextMesh({
      id: text,
      content: text,
      position: {
        x: mesh.position.x + width,
        y: mesh.position.y + height / 2 + 0.1,
        z: mesh.position.z,
      },
    });
    // 挂载到他车Mesh上
    mesh.textMesh = textMesh;
    group.add(textMesh);
    // 绘制朝向箭头
    const arrowMesh = drawArrow({
      id: data.id + "-" + "arrow",
      endPoint: {
        // 注意：这里只是模拟数据，实际endPoint应该根据算法结果来确定
        // 或者给个偏转角，前端做个计算，固定长度也行
        x: mesh.position.x,
        y: mesh.position.y,
        z: mesh.position.z - length,
      },
      origin: {
        x: mesh.position.x,
        y: mesh.position.y,
        z: mesh.position.z,
      },
    });
    mesh.arrowMesh = arrowMesh;
    group.add(arrowMesh);
    this.scene.add(group);
  }

mock 些数据来看看，效果如下：

最后

如果还要追求更好的场景效果，也可以用参与物模型替代立方体。但其实参与物也不全是这种规则的立方体，还需要实现一些柱体、不规则立方体等以满足实际场景需求，而且有时候 3d 文字并不能提供足够的信息，这时候就需要考虑 2d 小卡片了

源码

https://github.com/GitHubJackson/autopilot/tree/v0.1.2