Currently experimenting with merging text geometries in Three.js (r84) and looking to achieve this using multiMaterial while preserving individual colors for each text object. Check out the live demo here: https://jsfiddle.net/5oydk6nL/
Appreciate any insights or guidance.
var $win = $( window ) ,
$container = $( '#webGL-container' ) ,
scene , camera , cameraTarget , renderer ,
pointLight , hex ,
stats , rendererStats ,
typeface = 'https://cdn.rawgit.com/redwavedesign/ca97268140e8a51633595cd34bb77f16/raw/46ae61687ac8e7e3af01ee2c983580f2b0b0809f/bebas_regular.json';
/* text objects */
var a = {
text: 'a' ,
color: 'red' ,
x: -90
}
var b = {
text: 'b' ,
color: 'blue' ,
x: -60
}
var c = {
text: 'c' ,
color: 'green' ,
x: -30
}
var d = {
text: 'd' ,
color: 'yellow' ,
x: 0
}
var e = {
text: 'e' ,
color: 'purple' ,
x: 30
}
var f = {
text: 'f' ,
color: 'orange' ,
x: 60
}
var g = {
text: 'g' ,
color: 'aqua' ,
x: 90
}
// array containing all text objects
var letters = [ a , b , c , d , e , f , g ];
function decimalToHex( d ) {
var hex = Number( d ).toString( 16 );
hex = "000000".substr( 0, 6 - hex.length ) + hex;
return hex.toUpperCase();
}
function initialize() {
/* Create scene, camera, and renderer */
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40 , window.innerWidth / window.innerHeight , .1 , 1500 );
renderer = new THREE.WebGLRenderer({ antialias: true });
/* Setup renderer */
renderer.setClearColor( '#ffffff' );
renderer.setSize( window.innerWidth , window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
/* Setup camera */
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 500;
cameraTarget = new THREE.Vector3( 0 , 0 , 0 );
/* Lights */
pointLight = new THREE.PointLight( 0xffffff, 2 );
pointLight.position.set( 20 , -300 , 200 );
scene.add( pointLight );
pointLight.color.setStyle( '#EBEBEB' );
hex = decimalToHex( pointLight.color.getHex() );
// Load each text object from the 'letters' array
$.each( letters , function( index , letter ) {
var fontLoader = new THREE.FontLoader();
// Load font
fontLoader.load( typeface , function ( font ) {
var geometry = new THREE.TextGeometry( letter.text , {
font: font,
height: 8 ,
size: 28 ,
curveSegments: 4 ,
bevelThickness: 1,
bevelSize: 1.5 ,
bevelSegments: 3 ,
bevelEnabled: true ,
material: 0,
extrudeMaterial: 1
});
var material = new THREE.MultiMaterial( [
new THREE.MeshPhongMaterial( { color: letter.color , shading: THREE.FlatShading } ), // front
new THREE.MeshPhongMaterial( { color: letter.color , shading: THREE.SmoothShading } ) // side
] );
var mesh = new THREE.Mesh( geometry , material );
mesh.position.set( letter.x , 0 , 0 );
// Add text object to scene
scene.add( mesh );
});
// End of each loop
});
// Append the rendered element to the page
$container.append( renderer.domElement );
}
function animateScene() {
camera.lookAt( cameraTarget );
renderer.clear();
renderer.render( scene , camera );
}
function startAnimation() {
// Initialize Three.js stats utility
stats.begin();
requestAnimationFrame( startAnimation );
animateScene();
// Update Threex stats plugin
rendererStats.update( renderer );
// Test Three.js stats functionality
stats.end();
}
// Performance monitoring setup
rendererStats = new THREEx.RendererStats();
rendererStats.domElement.style.position = 'absolute'
rendererStats.domElement.style.left = '0px'
rendererStats.domElement.style.bottom = '0px'
document.body.appendChild( rendererStats.domElement );
stats = new Stats();
stats.showPanel( 0 );
document.body.appendChild( stats.domElement );
document.body.appendChild( stats.dom );
// Initialization
initialize();
// Start animation
startAnimation();