home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-25 21:05:59 +10:00
Code Issues Packages Projects Releases Wiki Activity

bezel => bevel in TextGeometry and its example

Browse Source
This commit is contained in:
alteredq
2011-07-21 17:53:51 +02:00
parent c35cca9ecf
commit f962eb2ea6
4 changed files with 178 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/webgl_geometry_text.html
+80 -80
View File
@@ -26,14 +26,14 @@
<body>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - procedural 3D text by <a href="http://www.lab4games.net/zz85/blog" target="_blank">zz85</a> &amp; alteredq
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - procedural 3D text by <a href="http://www.lab4games.net/zz85/blog" target="_blank">zz85</a> &amp; alteredq
(fonts from <a href="http://typeface.neocracy.org/">typeface.js</a> and <a href="http://en.wikipedia.org/wiki/Droid_%28font%29">Droid</a>)
<br/>type to enter new text, drag to spin the text
<br/><span class="button" id="color">change color</span>,
<span class="button" id="font">change font</span>,
<br/><span class="button" id="color">change color</span>,
<span class="button" id="font">change font</span>,
<span class="button" id="weight">change weight</span>,
<span class="button" id="bezel">change bezel</span>,
<span class="button" id="postprocessing">change postprocessing</span>,
<span class="button" id="bevel">change bevel</span>,
<span class="button" id="postprocessing">change postprocessing</span>,
<a id="permalink" href="#">permalink</a>
</div>
@@ -43,12 +43,12 @@
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<!-- load the font file from canvas-text -->
<!--
-->
<script type="text/javascript" src="fonts/gentilis_bold.typeface.js"></script>
<script type="text/javascript" src="fonts/gentilis_regular.typeface.js"></script>
@@ -60,7 +60,7 @@
<script type="text/javascript" src="fonts/droid/droid_sans_bold.typeface.js"></script>
<script type="text/javascript" src="fonts/droid/droid_serif_regular.typeface.js"></script>
<script type="text/javascript" src="fonts/droid/droid_serif_bold.typeface.js"></script>
<script type="text/javascript">
@@ -82,9 +82,9 @@
curveSegments = 6,
bezelThickness = 2,
bezelSize = 1.5,
bezelEnabled = true,
bevelThickness = 2,
bevelSize = 1.5,
bevelEnabled = true,
font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
weight = "bold", // normal bold
@@ -134,9 +134,9 @@
}
function decimalToHex( d ) {
var hex = Number( d ).toString( 16 );
hex = "000000".substr( 0, 6 - hex.length ) + hex;
hex = "000000".substr( 0, 6 - hex.length ) + hex;
return hex.toUpperCase();
}
@@ -180,7 +180,7 @@
var fonthash = hash.substring( 6, 7 );
var weighthash = hash.substring( 7, 8 );
var pphash = hash.substring( 8, 9 );
var bezelhash = hash.substring( 9, 10 );
var bevelhash = hash.substring( 9, 10 );
var texthash = hash.substring( 11 );
hex = colorhash;
@@ -190,7 +190,7 @@
weight = reverseWeightMap[ parseInt( weighthash ) ];
postprocessing.enabled = parseInt( pphash );
bezelEnabled = parseInt( bezelhash );
bevelEnabled = parseInt( bevelhash );
text = decodeURI( texthash );
@@ -206,7 +206,7 @@
textGeo = new THREE.TextGeometry( text, {
size: size,
size: size,
height: height,
curveSegments: curveSegments,
@@ -214,16 +214,16 @@
weight: weight,
style: style,
bezelThickness: bezelThickness,
bezelSize: bezelSize,
bezelEnabled: bezelEnabled
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: bevelEnabled
});
textMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, wireframe: false } );
parent = new THREE.Object3D();
textMesh1 = new THREE.Mesh( textGeo, textMaterial );
textMesh1.position.x = 0;
@@ -247,7 +247,7 @@
textMesh2.rotation.y = Math.PI * 2;
parent.addChild( textMesh2 );
}
parent.position.y = 100;
@@ -260,7 +260,7 @@
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( scene.fog.color, 1 );
container.appendChild( renderer.domElement );
@@ -277,91 +277,91 @@
document.addEventListener( 'keydown', onDocumentKeyDown, false );
document.getElementById( "color" ).addEventListener( 'click', function() {
pointLight.color.setHSV( Math.random(), 0.95, 0.85 );
pointLight.color.updateHex();
hex = decimalToHex( pointLight.color.hex );
updatePermalink();
}, false );
document.getElementById( "font" ).addEventListener( 'click', function() {
if ( font == "helvetiker" ) {
font = "optimer";
} else if ( font == "optimer" ) {
font = "gentilis";
} else if ( font == "gentilis" ) {
font = "droid sans";
} else if ( font == "droid sans" ) {
font = "droid serif";
} else {
font = "helvetiker";
}
refreshText();
}, false );
document.getElementById( "weight" ).addEventListener( 'click', function() {
if ( weight == "bold" ) {
weight = "normal";
} else {
weight = "bold";
}
refreshText();
}, false );
document.getElementById( "bezel" ).addEventListener( 'click', function() {
bezelEnabled = !bezelEnabled;
document.getElementById( "bevel" ).addEventListener( 'click', function() {
bevelEnabled = !bevelEnabled;
refreshText();
}, false );
document.getElementById( "postprocessing" ).addEventListener( 'click', function() {
postprocessing.enabled = !postprocessing.enabled;
updatePermalink();
}, false );
initPostprocessing();
renderer.autoClear = false;
}
//
function boolToNum( b ) {
return b ? 1 : 0;
}
function updatePermalink() {
var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bezelEnabled ) + "#" + encodeURI( text );
var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
permalink.href = "#" + link;
window.location.hash = link;
@@ -370,14 +370,14 @@
function onDocumentKeyDown( event ) {
if ( firstLetter ) {
firstLetter = false;
text = "";
}
var keyCode = event.keyCode;
// backspace
if ( keyCode == 8 ) {
@@ -388,23 +388,23 @@
refreshText();
return false;
}
}
function onDocumentKeyPress( event ) {
var keyCode = event.which;
// backspace
if ( keyCode == 8 ) {
event.preventDefault();
} else {
var ch = String.fromCharCode( keyCode );
text += ch;
@@ -413,16 +413,16 @@
}
}
function refreshText() {
updatePermalink();
scene.removeChild( textMesh1 );
textGeo = new THREE.TextGeometry( text, {
size: size,
size: size,
height: height,
curveSegments: curveSegments,
@@ -430,9 +430,9 @@
weight: weight,
style: style,
bezelThickness: bezelThickness,
bezelSize: bezelSize,
bezelEnabled: bezelEnabled
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: bevelEnabled
});
@@ -459,14 +459,14 @@
textMesh2.rotation.x = Math.PI;
textMesh2.rotation.y = Math.PI * 2;
parent.addChild( textMesh2 );
}
}
function onDocumentMouseDown( event ) {
event.preventDefault();
@@ -531,7 +531,7 @@
}
//
function initPostprocessing() {
postprocessing.scene = new THREE.Scene();
@@ -621,9 +621,9 @@
time = new Date().getTime();
delta = 0.1 * ( time - oldTime );
oldTime = time;
parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
if ( postprocessing.enabled ) {
renderer.clear();
@@ -669,7 +669,7 @@
renderer.clear();
renderer.render( scene, camera );
}
}
}