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