如何使用 Three.js 将文本居中

Question

我正在尝试渲染如图所示的文本。我可以手动在文本中添加换行符，但是内容将是动态的，因此我认为手动创建新行不是一个很好的选择。

这是到目前为止我的代码。我可以在一行中显示文本。

import React, { useEffect } from "react";
import * as THREE from "three";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { ThreeJSOverlayView } from "@googlemaps/three";

const Text = (props) => {
  useEffect(() => {
    props.map.setCenter(props.mapOptions.center);
    const overlay = new ThreeJSOverlayView({
      anchor: {
        lat: props.mapOptions.center.lat,
        lng: props.mapOptions.center.lng,
        altitude: 0,
      },
      upAxis: "Y",
    });
    overlay.setMap(props.map);

    const fontLoader = new FontLoader();

    fontLoader.load("./font.json", function (font) {
      const title = "HYATT HOTEL VANCOUVER";

      const geometry = new TextGeometry(title, {
        font: font,
        size: 60,
        height: 5,
      });

      const material = new THREE.MeshPhongMaterial({
        color: 0x4285f4,
        specular: 0xffffff,
      });

      const mesh = new THREE.Mesh(geometry, material);

      mesh.position.copy(
        overlay.latLngAltitudeToVector3({
          lat: props.mapOptions.center.lat,
          lng: props.mapOptions.center.lng,
        })
      );

      mesh.position.setY(130);
      mesh.scale.set(0.3, 0.3, 0.3);
      mesh.rotation.y = -Math.PI;

      overlay.scene.add(mesh);
    });
  }, []);
};

export default Text;

我的问题是：

1. 如何设置文本宽度以便自动换行？
2. 如何将 3D 文本居中？

Answer 1

这将使文本在 X 坐标上居中

geometry.computeBoundingBox();

const xMid = - 0.5 * ( Geometry.boundingBox.max.x - Geometry.boundingBox.min.x );

titleGeom.translate( xMid, 0, 0 );

Answer 2

发布答案后，我立即发现了一个更简单的解决方案。 几何.center();

如果您的解决方案正确，我很乐意看到它。我实际上是在尝试实现与您的屏幕截图完全相同的示例。