CODEWITHSUNDEEP
javascriptthree.js
Pavlo Blazhchuk
Pavlo Blazhchuk

Reputation: 113

Text isn't rendered correctly using TextGeometry (Three.js)

I was trying to render text in three.js using TextGeometry but got an empty black screen. I suspected that was an issue with the camera and I added simple green box, that box was rendered correctly.

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

enter image description here

Upvotes: 0

Views: 1099

Answers (1)

Pavlo Blazhchuk
Pavlo Blazhchuk

Reputation: 113

I have found the problem, sorry for the delay. If you use MeshPhongMaterial texture or others (except MeshBasicMaterial) you should add some lights to your scene. Just add this lines to your scene.

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

Upvotes: 1

Related Questions