08-text3D.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - text 3d</title>
<meta charset="utf-8">
<script src="../frameworks/three.min.js"></script>
<script src="../frameworks/dat.gui.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
var gui = new dat.GUI();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer( );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000 );
document.body.appendChild( renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0x000000 );
scene.add( ambientLight );
var lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 0 ].position.set( 0, 200, 0 );
lights[ 1 ].position.set( 100, 200, 100 );
lights[ 2 ].position.set( - 100, - 200, - 100 );
scene.add( lights[ 0 ] );
scene.add( lights[ 1 ] );
scene.add( lights[ 2 ] );
var mesh = new THREE.Mesh(
new THREE.Geometry(),
new THREE.MeshPhongMaterial( {
color: 0x156289,
emissive: 0x072534,
shading: THREE.FlatShading
} ));
scene.add( mesh );
guiGeometry( mesh );
var render = function () {
requestAnimationFrame( render );
var time = Date.now() * 0.001;
mesh.rotation.y += 0.005;
renderer.render( scene, camera );
};
window.addEventListener( 'resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
render();
function guiGeometry( mesh ) {
var data = {
text : "TextGeometry",
size : 5,
height : 2,
curveSegments : 12,
font : "helvetiker",
weight : "regular",
bevelEnabled : false,
bevelThickness : 1,
bevelSize : 0.5
};
var fonts = [
"helvetiker",
"optimer",
"gentilis",
"droid/droid_serif"
];
var weights = [
"regular", "bold"
];
function generateGeometry() {
var loader = new THREE.FontLoader();
loader.load( '../data/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
var geometry = new THREE.TextGeometry( data.text, {
font: font,
size: data.size,
height: data.height,
curveSegments: data.curveSegments,
bevelEnabled: data.bevelEnabled,
bevelThickness: data.bevelThickness,
bevelSize: data.bevelSize
} );
geometry.center();
mesh.geometry.dispose();
mesh.geometry=geometry;
} );
}
//Hide the wireframe
var folder = gui.addFolder( 'THREE.TextGeometry' );
folder.add( data, 'text' ).onChange( generateGeometry );
folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'font', fonts ).onChange( generateGeometry );
folder.add( data, 'weight', weights ).onChange( generateGeometry );
folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
generateGeometry();
}
</script>
</body>
</html>