使用TextGeometry（Three.js）无法正确呈现文本

Question

我试图使用TextGeometry在three.js中渲染文本但是却得到一个空白的黑屏。我怀疑这是相机的一个问题，我添加了简单的绿色框，该框被正确渲染。

// tslint:disable-next-line:no-var-requires
const fontJson = require("./fonts/gentilis_bold.typeface.json");
import "./index.scss";

import * as THREE from "three";
(window as any).THREE = THREE;
import "./controls/OrbitControls";

const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
camera.lookAt(scene.position);

const textMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
console.log(new THREE.Font(fontJson))
const textGeometry = new THREE.TextGeometry("Hello amigo", {
  font: new THREE.Font(fontJson),
  size: 80,
  height: 5,
  curveSegments: 12,
  bevelEnabled: true,
  bevelThickness: 10,
  bevelSize: 8,
});
const textMesh = new THREE.Mesh(textGeometry, textMaterial);

// const geometry = new THREE.BoxGeometry(1, 1, 1);
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// const mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh);

scene.add(textMesh);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => {
  renderer.render(scene, camera);
});

renderer.render(scene, camera);

Answer 1

我发现了问题，对不起延误。如果您使用MeshPhongMaterial纹理或其他（MeshBasicMaterial除外），您应该为场景添加一些灯光。只需将此行添加到场景中即可。

const pointLight = new THREE.PointLight(0xffffff, 1.5); pointLight.position.set(0, 100, 90);
scene.add(pointLight);
pointLight.color.setHSL(Math.random(), 1, 0.5);
const textMaterials = [
new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }),
new THREE.MeshPhongMaterial({ color: 0xffffff }),
];