Text wird nicht korrekt gerendert mit TextGeometry (Three.js)

Question

Ich habe versucht, Text in Three.js mit TextGeometry zu rendern, aber einen leeren schwarzen Bildschirm bekommen. Ich vermutete, das war ein Problem mit der Kamera und ich habe einfach eine grüne Box hinzugefügt, diese Box wurde richtig gerendert.

// 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

Ich habe das Problem, sorry für die Verzögerung gefunden. Wenn Sie die MeshPhongMaterial-Textur oder andere (außer MeshBasicMaterial) verwenden, sollten Sie Ihrer Szene einige Lichter hinzufügen. Füge einfach diese Zeilen zu deiner Szene hinzu.

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 }), 
];