Simplest Three.js TextGeometry()
This is the simplest Three.js that uses TextGeometry(). All the others I could find were fairly involved showing off all the extra features I didn't need. If you get a ton of errors, you might be falling victim to this issue, which was the only way I figured out how to use it... https://github.com/mrdoob/three.js/issues/7360#issuecomment-183119398
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script>
This is the simplest Three.js that uses TextGeometry(). All the others I could find were fairly involved showing off all the extra features I didn't need. If you get a ton of errors, you might be falling victim to this issue, which was the only way I figured out how to use it... https://github.com/mrdoob/three.js/issues/7360#issuecomment-183119398<div id="threejs-viewer"></div>
JavaScript
var container;
var camera, controls, scene, plane, renderer;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.target = new THREE.Vector3(0, 0, 0);
camera.position.z = 0;
scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(5263440));
var light = new THREE.SpotLight(16777215, 1.5);
light.position.set(0, 500, 200);
light.castShadow = true;
light.shadow.camera.near = 200;
light.shadow.camera.far = camera.far;
light.shadow.camera.fov = 50;
light.shadow.bias = - 0.000022;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
scene.add(light);
//// Start of TextGeometry
var loader = new THREE.FontLoader();
loader.load( 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_bold.typeface.js', function ( font ) {
var textGeo = new THREE.TextGeometry( "THREE.JS", {
font: font,
size: 20, // font size
height: 10, // how much extrusion (how thick / deep are the letters)
curveSegments: 12,
bevelThickness: 1,
bevelSize: 1,
bevelEnabled: true
});
textGeo.computeBoundingBox();
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.x = -75;
mesh.position.y = 0;
mesh.position.z = -200;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
});
// End TextGeometry
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(15790320);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(500, 300);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
update();
...