Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 f0e0f5be 编写于 作者: M Mr.doob
浏览文件
操作

Updated examples with new TextGeometry API.

上级 57cf3720
隐藏空白更改
内联 并排
Showing with 342 addition and 654 deletion
examples/canvas_geometry_text.html
浏览文件 @ f0e0f5be
......@@ -23,10 +23,6 @@
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>
<script>
......@@ -34,7 +30,7 @@
var camera, scene, renderer;
var group, text;
var group;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
......@@ -45,10 +41,15 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
init( font );
animate();
function init() {
} );
function init( font ) {
container = document.createElement( 'div' );
document.body.appendChild( container );
......@@ -78,34 +79,35 @@
}
var text3d = new THREE.TextGeometry( theText, {
var geometry = new THREE.TextGeometry( theText, {
font: font,
size: 80,
height: 20,
curveSegments: 2,
font: "helvetiker"
curveSegments: 2
});
text3d.computeBoundingBox();
var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
geometry.computeBoundingBox();
var centerOffset = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
var material = new THREE.MeshFaceMaterial( [
new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
] );
text = new THREE.Mesh( text3d, material );
var mesh = new THREE.Mesh( geometry, material );
text.position.x = centerOffset;
text.position.y = 100;
text.position.z = 0;
mesh.position.x = centerOffset;
mesh.position.y = 100;
mesh.position.z = 0;
text.rotation.x = 0;
text.rotation.y = Math.PI * 2;
mesh.rotation.x = 0;
mesh.rotation.y = Math.PI * 2;
group = new THREE.Group();
group.add( text );
group.add( mesh );
scene.add( group );
......
examples/webgl_camera_logarithmicdepthbuffer.html
浏览文件 @ f0e0f5be
......@@ -26,7 +26,6 @@
}
a {
color: #0080ff;
}
......@@ -92,10 +91,6 @@
<script src="../build/three.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>
<script>
// 1 micrometer to 100 billion light years in one scene, with 1 unit = 1 meter? preposterous! and yet...
......@@ -134,17 +129,23 @@
];
init();
animate();
function init() {
container = document.getElementById( 'container' );
var scene = initScene();
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
var scene = initScene( font );
// Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
objects.normal = initView( scene, 'normal', false );
objects.logzbuf = initView( scene, 'logzbuf', true );
animate();
// Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
objects.normal = initView( scene, 'normal', false );
objects.logzbuf = initView( scene, 'logzbuf', true );
} );
stats = new Stats();
container.appendChild(stats.domElement);
......@@ -158,7 +159,6 @@
window.addEventListener( 'MozMousePixelScroll', onMouseWheel, false );
window.addEventListener( 'mousemove', onMouseMove, false );
render();
}
function initView( scene, name, logDepthBuf ) {
......@@ -179,7 +179,7 @@
}
function initScene() {
function initScene( font ) {
var scene = new THREE.Scene();
......@@ -203,12 +203,15 @@
var geometry = new THREE.SphereBufferGeometry(0.5, 24, 12);
for (var i = 0; i < labeldata.length; i++) {
var scale = labeldata[i].scale || 1;
var labelgeo = new THREE.TextGeometry( labeldata[i].label, {
font: font,
size: labeldata[i].size,
height: labeldata[i].size / 2,
font: 'helvetiker',
});
} );
labelgeo.computeBoundingSphere();
// center text
......
examples/webgl_custom_attributes_lines.html
浏览文件 @ f0e0f5be
......@@ -36,10 +36,6 @@
<script src="../build/three.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_bold.typeface.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
uniform float amplitude;
......@@ -85,10 +81,15 @@
var object, uniforms;
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
init( font );
animate();
function init() {
} );
function init( font ) {
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 400;
......@@ -114,16 +115,15 @@
});
var geometry = new THREE.TextGeometry( 'three.js', {
font: font,
size: 50,
height: 15,
curveSegments: 10,
font: 'helvetiker',
weight: 'bold',
style: 'normal',
bevelThickness: 5,
bevelSize: 1.5,
bevelEnabled: true,
......@@ -131,7 +131,7 @@
steps: 40
});
} );
geometry.center();
......
examples/webgl_geometry_normals.html
浏览文件 @ f0e0f5be
......@@ -19,10 +19,6 @@
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>
<script>
var container, stats;
......@@ -37,7 +33,7 @@
var F = function( klass, args ) {
return klass.apply( this, args );
return klass.apply( this, args );
};
......@@ -58,8 +54,6 @@
}
var geometriesParams = [
{ type: 'BoxGeometry', args: [ 200, 200, 200, 2, 2, 2, materials ] },
......@@ -90,16 +84,21 @@
new THREE.Vector3(0,50,050),
new THREE.Vector3(0,0,100) ], 12, Math.PI*2/3, Math.PI*3/2 ] },
{ type: 'TextGeometry', args: ['&', {
size: 200,
height: 50,
curveSegments: 1,
font: "helvetiker"
}]},
size: 200,
height: 50,
curveSegments: 1
}]},
{ type: 'PlaneGeometry', args: [ 200, 200, 4, 4 ] }
];
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
geometriesParams[ 12 ].args[ 1 ].font = font;
} );
var info;
var geometryIndex = 0;
......@@ -197,7 +196,6 @@
f = geometry.faces[ i ];
n = ( f instanceof THREE.Face3 ) ? 3 : 4;
for( var j = 0; j < n; j++ ) {
......
examples/webgl_geometry_text.html
浏览文件 @ f0e0f5be
......@@ -31,8 +31,7 @@
<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="bevel">change bevel</span>,
<span class="button" id="postprocessing">change postprocessing</span>,
<span class="button" id="bevel">change bevel</span>
<a id="permalink" href="#">permalink</a>
</div>
......@@ -40,46 +39,19 @@
<script src="../build/three.min.js"></script>
<script src="js/utils/GeometryUtils.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FilmShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/postprocessing/FilmPass.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_bold.typeface.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="fonts/optimer_bold.typeface.js"></script>
<script src="fonts/optimer_regular.typeface.js"></script>
<script src="fonts/helvetiker_bold.typeface.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>
<script src="fonts/droid/droid_sans_regular.typeface.js"></script>
<script src="fonts/droid/droid_sans_bold.typeface.js"></script>
<script src="fonts/droid/droid_serif_regular.typeface.js"></script>
<script src="fonts/droid/droid_serif_bold.typeface.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
THREE.Cache.enabled = true;
var container, stats, permalink, hex, color;
var camera, cameraTarget, scene, renderer;
var composer;
var effectFXAA;
var group, textMesh1, textMesh2, textGeo, material;
var firstLetter = true;
......@@ -97,9 +69,10 @@
bevelSegments = 3,
bevelEnabled = true,
font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
weight = "bold", // normal bold
style = "normal"; // normal italic
font = undefined,
fontName = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
fontWeight = "bold"; // normal bold
var mirror = true;
......@@ -108,14 +81,14 @@
"helvetiker": 0,
"optimer": 1,
"gentilis": 2,
"droid sans": 3,
"droid serif": 4
"droid/droid_sans": 3,
"droid/droid_serif": 4
};
var weightMap = {
"normal": 0,
"regular": 0,
"bold": 1
};
......@@ -135,9 +108,7 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var postprocessing = { enabled : false };
var glow = 0.9;
var fontIndex = 0;
var fontIndex = 1;
init();
animate();
......@@ -179,10 +150,6 @@
pointLight.position.set( 0, 100, 90 );
scene.add( pointLight );
//text = capitalize( font ) + " " + capitalize( weight );
//text = "abcdefghijklmnopqrstuvwxyz0123456789";
//text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
// Get text from hash
var hash = document.location.hash.substr( 1 );
......@@ -192,17 +159,15 @@
var colorhash = hash.substring( 0, 6 );
var fonthash = hash.substring( 6, 7 );
var weighthash = hash.substring( 7, 8 );
var pphash = hash.substring( 8, 9 );
var bevelhash = hash.substring( 9, 10 );
var bevelhash = hash.substring( 8, 9 );
var texthash = hash.substring( 10 );
hex = colorhash;
pointLight.color.setHex( parseInt( colorhash, 16 ) );
font = reverseFontMap[ parseInt( fonthash ) ];
weight = reverseWeightMap[ parseInt( weighthash ) ];
fontName = reverseFontMap[ parseInt( fonthash ) ];
fontWeight = reverseWeightMap[ parseInt( weighthash ) ];
postprocessing.enabled = parseInt( pphash );
bevelEnabled = parseInt( bevelhash );
text = decodeURI( texthash );
......@@ -226,7 +191,7 @@
scene.add( group );
createText();
loadFont();
var plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 10000, 10000 ),
......@@ -258,10 +223,6 @@
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'keypress', onDocumentKeyPress, false );
document.addEventListener( 'keydown', onDocumentKeyDown, false );
renderer.domElement.addEventListener( 'drop', onDrop, false );
renderer.domElement.addEventListener("dragover", function (evt) {
evt.preventDefault();
}, false);
document.getElementById( "color" ).addEventListener( 'click', function() {
......@@ -275,32 +236,27 @@
document.getElementById( "font" ).addEventListener( 'click', function() {
fontIndex ++;
if ( fontIndex >= reverseFontMap.length ) {
fontIndex = 0;
}
font = reverseFontMap[fontIndex];
fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
refreshText();
loadFont();
}, false );
document.getElementById( "weight" ).addEventListener( 'click', function() {
if ( weight == "bold" ) {
if ( fontWeight === "bold" ) {
weight = "normal";
fontWeight = "regular";
} else {
weight = "bold";
fontWeight = "bold";
}
refreshText();
loadFont();
}, false );
......@@ -312,38 +268,6 @@
}, false );
document.getElementById( "postprocessing" ).addEventListener( 'click', function() {
postprocessing.enabled = !postprocessing.enabled;
updatePermalink();
}, false );
// POSTPROCESSING
renderer.autoClear = false;
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 0.25 );
var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
effectFilm.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectFXAA );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
//
window.addEventListener( 'resize', onWindowResize, false );
......@@ -360,10 +284,6 @@
renderer.setSize( window.innerWidth, window.innerHeight );
composer.reset();
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
}
//
......@@ -376,45 +296,13 @@
function updatePermalink() {
var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
var link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
permalink.href = "#" + link;
window.location.hash = link;
}
function onDrop( e ) {
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function ( event ) {
console.log( event.target );
eval( event.target.result );
var index = 0;
for ( f in THREE.FontUtils.faces ) {
if ( ! fontMap[ f ] ) {
fontMap[ f ] = reverseFontMap.length;
reverseFontMap[ reverseFontMap.length ] = f;
font = f;
}
};
refreshText();
};
console.log(file);
reader.readAsText(file);
return false;
};
function onDocumentKeyDown( event ) {
if ( firstLetter ) {
......@@ -462,18 +350,29 @@
}
function loadFont() {
var loader = new THREE.FontLoader();
loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
font = response;
refreshText();
} );
}
function createText() {
textGeo = new THREE.TextGeometry( text, {
font: font,
size: size,
height: height,
curveSegments: curveSegments,
font: font,
weight: weight,
style: style,
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: bevelEnabled,
......@@ -652,16 +551,7 @@
camera.lookAt( cameraTarget );
renderer.clear();
if ( postprocessing.enabled ) {
composer.render( 0.05 );
} else {
renderer.render( scene, camera );
}
renderer.render( scene, camera );
}
......
examples/webgl_geometry_text_earcut.html
浏览文件 @ f0e0f5be
......@@ -32,8 +32,7 @@
<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="bevel">change bevel</span>,
<span class="button" id="postprocessing">change postprocessing</span>,
<span class="button" id="bevel">change bevel</span>
<a id="permalink" href="#">permalink</a>
</div>
......@@ -41,34 +40,9 @@
<script src="../build/three.min.js"></script>
<script src="js/utils/GeometryUtils.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FilmShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/postprocessing/FilmPass.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_bold.typeface.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="fonts/optimer_bold.typeface.js"></script>
<script src="fonts/optimer_regular.typeface.js"></script>
<script src="fonts/helvetiker_bold.typeface.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>
<script src="fonts/droid/droid_sans_regular.typeface.js"></script>
<script src="fonts/droid/droid_sans_bold.typeface.js"></script>
<script src="fonts/droid/droid_serif_regular.typeface.js"></script>
<script src="fonts/droid/droid_serif_bold.typeface.js"></script>
<!-- replace built-in triangulation with Earcut -->
<script src="js/libs/earcut.js"></script>
......@@ -101,7 +75,7 @@
grouped.push( result.slice( i, i + 3 ) );
}
return grouped;
};
};
</script>
......@@ -109,13 +83,12 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
THREE.Cache.enabled = true;
var container, stats, permalink, hex, color;
var camera, cameraTarget, scene, renderer;
var composer;
var effectFXAA;
var group, textMesh1, textMesh2, textGeo, material;
var firstLetter = true;
......@@ -133,9 +106,10 @@
bevelSegments = 3,
bevelEnabled = true,
font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
weight = "bold", // normal bold
style = "normal"; // normal italic
font = undefined,
fontName = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
fontWeight = "bold"; // normal bold
var mirror = true;
......@@ -144,20 +118,20 @@
"helvetiker": 0,
"optimer": 1,
"gentilis": 2,
"droid sans": 3,
"droid serif": 4
"droid/droid_sans": 3,
"droid/droid_serif": 4
};
var weightMap = {
"normal": 0,
"regular": 0,
"bold": 1
};
var reverseFontMap = {};
var reverseWeightMap = {};
var reverseFontMap = [];
var reverseWeightMap = [];
for ( var i in fontMap ) reverseFontMap[ fontMap[i] ] = i;
for ( var i in weightMap ) reverseWeightMap[ weightMap[i] ] = i;
......@@ -171,18 +145,11 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var postprocessing = { enabled : false };
var glow = 0.9;
var fontIndex = 1;
init();
animate();
function capitalize( txt ) {
return txt.substring( 0, 1 ).toUpperCase() + txt.substring( 1 );
}
function decimalToHex( d ) {
var hex = Number( d ).toString( 16 );
......@@ -220,10 +187,6 @@
pointLight.position.set( 0, 100, 90 );
scene.add( pointLight );
//text = capitalize( font ) + " " + capitalize( weight );
//text = "abcdefghijklmnopqrstuvwxyz0123456789";
//text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
// Get text from hash
var hash = document.location.hash.substr( 1 );
......@@ -233,17 +196,15 @@
var colorhash = hash.substring( 0, 6 );
var fonthash = hash.substring( 6, 7 );
var weighthash = hash.substring( 7, 8 );
var pphash = hash.substring( 8, 9 );
var bevelhash = hash.substring( 9, 10 );
var bevelhash = hash.substring( 8, 9 );
var texthash = hash.substring( 10 );
hex = colorhash;
pointLight.color.setHex( parseInt( colorhash, 16 ) );
font = reverseFontMap[ parseInt( fonthash ) ];
weight = reverseWeightMap[ parseInt( weighthash ) ];
fontName = reverseFontMap[ parseInt( fonthash ) ];
fontWeight = reverseWeightMap[ parseInt( weighthash ) ];
postprocessing.enabled = parseInt( pphash );
bevelEnabled = parseInt( bevelhash );
text = decodeURI( texthash );
......@@ -267,7 +228,7 @@
scene.add( group );
createText();
loadFont();
var plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 10000, 10000 ),
......@@ -311,45 +272,28 @@
document.getElementById( "font" ).addEventListener( 'click', function() {
if ( font == "helvetiker" ) {
font = "optimer";
} else if ( font == "optimer" ) {
font = "gentilis";
fontIndex ++;
} else if ( font == "gentilis" ) {
fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
font = "droid sans";
} else if ( font == "droid sans" ) {
font = "droid serif";
} else {
font = "helvetiker";
}
refreshText();
loadFont();
}, false );
document.getElementById( "weight" ).addEventListener( 'click', function() {
if ( weight == "bold" ) {
if ( fontWeight === "bold" ) {
weight = "normal";
fontWeight = "regular";
} else {
weight = "bold";
fontWeight = "bold";
}
refreshText();
loadFont();
}, false );
......@@ -361,38 +305,6 @@
}, false );
document.getElementById( "postprocessing" ).addEventListener( 'click', function() {
postprocessing.enabled = !postprocessing.enabled;
updatePermalink();
}, false );
// POSTPROCESSING
renderer.autoClear = false;
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 0.25 );
var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
effectFilm.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectFXAA );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
//
window.addEventListener( 'resize', onWindowResize, false );
......@@ -409,10 +321,6 @@
renderer.setSize( window.innerWidth, window.innerHeight );
composer.reset();
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
}
//
......@@ -425,7 +333,7 @@
function updatePermalink() {
var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
var link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
permalink.href = "#" + link;
window.location.hash = link;
......@@ -479,18 +387,29 @@
}
function loadFont() {
var loader = new THREE.FontLoader();
loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
font = response;
refreshText();
} );
}
function createText() {
textGeo = new THREE.TextGeometry( text, {
font: font,
size: size,
height: height,
curveSegments: curveSegments,
font: font,
weight: weight,
style: style,
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: bevelEnabled,
......@@ -669,16 +588,7 @@
camera.lookAt( cameraTarget );
renderer.clear();
if ( postprocessing.enabled ) {
composer.render( 0.05 );
} else {
renderer.render( scene, camera );
}
renderer.render( scene, camera );
}
......
examples/webgl_geometry_text_pnltri.html
浏览文件 @ f0e0f5be
......@@ -32,8 +32,7 @@
<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="bevel">change bevel</span>,
<span class="button" id="postprocessing">change postprocessing</span>,
<span class="button" id="bevel">change bevel</span>
<a id="permalink" href="#">permalink</a>
</div>
......@@ -41,34 +40,9 @@
<script src="../build/three.min.js"></script>
<script src="js/utils/GeometryUtils.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FilmShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/postprocessing/FilmPass.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_bold.typeface.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="fonts/optimer_bold.typeface.js"></script>
<script src="fonts/optimer_regular.typeface.js"></script>
<script src="fonts/helvetiker_bold.typeface.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>
<script src="fonts/droid/droid_sans_regular.typeface.js"></script>
<script src="fonts/droid/droid_sans_bold.typeface.js"></script>
<script src="fonts/droid/droid_serif_regular.typeface.js"></script>
<script src="fonts/droid/droid_serif_bold.typeface.js"></script>
<!-- replace built-in triangulation with PnlTri.js -->
<script src="js/libs/pnltri.min.js"></script>
......@@ -82,23 +56,21 @@
} )();
</script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
THREE.Cache.enabled = true;
var container, stats, permalink, hex, color;
var camera, cameraTarget, scene, renderer;
var composer;
var effectFXAA;
var group, textMesh1, textMesh2, textGeo, material;
var firstLetter = true;
var text = "three.js",
var text = "PnlTri",
height = 20,
size = 70,
......@@ -111,9 +83,10 @@
bevelSegments = 3,
bevelEnabled = true,
font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
weight = "bold", // normal bold
style = "normal"; // normal italic
font = undefined,
fontName = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
fontWeight = "bold"; // normal bold
var mirror = true;
......@@ -122,20 +95,20 @@
"helvetiker": 0,
"optimer": 1,
"gentilis": 2,
"droid sans": 3,
"droid serif": 4
"droid/droid_sans": 3,
"droid/droid_serif": 4
};
var weightMap = {
"normal": 0,
"regular": 0,
"bold": 1
};
var reverseFontMap = {};
var reverseWeightMap = {};
var reverseFontMap = [];
var reverseWeightMap = [];
for ( var i in fontMap ) reverseFontMap[ fontMap[i] ] = i;
for ( var i in weightMap ) reverseWeightMap[ weightMap[i] ] = i;
......@@ -149,18 +122,11 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var postprocessing = { enabled : false };
var glow = 0.9;
var fontIndex = 1;
init();
animate();
function capitalize( txt ) {
return txt.substring( 0, 1 ).toUpperCase() + txt.substring( 1 );
}
function decimalToHex( d ) {
var hex = Number( d ).toString( 16 );
......@@ -198,10 +164,6 @@
pointLight.position.set( 0, 100, 90 );
scene.add( pointLight );
//text = capitalize( font ) + " " + capitalize( weight );
//text = "abcdefghijklmnopqrstuvwxyz0123456789";
//text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
// Get text from hash
var hash = document.location.hash.substr( 1 );
......@@ -211,17 +173,15 @@
var colorhash = hash.substring( 0, 6 );
var fonthash = hash.substring( 6, 7 );
var weighthash = hash.substring( 7, 8 );
var pphash = hash.substring( 8, 9 );
var bevelhash = hash.substring( 9, 10 );
var bevelhash = hash.substring( 8, 9 );
var texthash = hash.substring( 10 );
hex = colorhash;
pointLight.color.setHex( parseInt( colorhash, 16 ) );
font = reverseFontMap[ parseInt( fonthash ) ];
weight = reverseWeightMap[ parseInt( weighthash ) ];
fontName = reverseFontMap[ parseInt( fonthash ) ];
fontWeight = reverseWeightMap[ parseInt( weighthash ) ];
postprocessing.enabled = parseInt( pphash );
bevelEnabled = parseInt( bevelhash );
text = decodeURI( texthash );
......@@ -245,7 +205,7 @@
scene.add( group );
createText();
loadFont();
var plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 10000, 10000 ),
......@@ -289,45 +249,28 @@
document.getElementById( "font" ).addEventListener( 'click', function() {
if ( font == "helvetiker" ) {
font = "optimer";
} else if ( font == "optimer" ) {
font = "gentilis";
fontIndex ++;
} else if ( font == "gentilis" ) {
fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
font = "droid sans";
} else if ( font == "droid sans" ) {
font = "droid serif";
} else {
font = "helvetiker";
}
refreshText();
loadFont();
}, false );
document.getElementById( "weight" ).addEventListener( 'click', function() {
if ( weight == "bold" ) {
if ( fontWeight === "bold" ) {
weight = "normal";
fontWeight = "regular";
} else {
weight = "bold";
fontWeight = "bold";
}
refreshText();
loadFont();
}, false );
......@@ -339,38 +282,6 @@
}, false );
document.getElementById( "postprocessing" ).addEventListener( 'click', function() {
postprocessing.enabled = !postprocessing.enabled;
updatePermalink();
}, false );
// POSTPROCESSING
renderer.autoClear = false;
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 0.25 );
var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
effectFilm.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectFXAA );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
//
window.addEventListener( 'resize', onWindowResize, false );
......@@ -387,10 +298,6 @@
renderer.setSize( window.innerWidth, window.innerHeight );
composer.reset();
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
}
//
......@@ -403,7 +310,7 @@
function updatePermalink() {
var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
var link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
permalink.href = "#" + link;
window.location.hash = link;
......@@ -457,18 +364,29 @@
}
function loadFont() {
var loader = new THREE.FontLoader();
loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
font = response;
refreshText();
} );
}
function createText() {
textGeo = new THREE.TextGeometry( text, {
font: font,
size: size,
height: height,
curveSegments: curveSegments,
font: font,
weight: weight,
style: style,
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: bevelEnabled,
......@@ -647,16 +565,7 @@
camera.lookAt( cameraTarget );
renderer.clear();
if ( postprocessing.enabled ) {
composer.render( 0.05 );
} else {
renderer.render( scene, camera );
}
renderer.render( scene, camera );
}
......
examples/webgl_materials_variations_basic.html
浏览文件 @ f0e0f5be
......@@ -5,13 +5,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
body {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
background-color: #000;
margin: 0px;
overflow: hidden;
}
......@@ -30,9 +30,6 @@
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
......@@ -46,10 +43,15 @@
var camera, scene, renderer, controls, objects = [];
var particleLight;
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
function init() {
init( font );
animate();
} );
function init( font ) {
container = document.createElement( 'div' );
document.body.appendChild( container );
......@@ -118,20 +120,15 @@
}
}
}
function addLabel( name, location ) {
var textGeo = new THREE.TextGeometry( name, {
size: 20,
height: 5,
curveSegments: 10,
font: 'gentilis',
weight: 'normal',
style: 'normal',
font: font,
material: 0,
extrudeMaterial: 1
size: 20,
height: 1,
curveSegments: 1
});
......
examples/webgl_materials_variations_lambert.html
浏览文件 @ f0e0f5be
......@@ -5,13 +5,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
body {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
background-color: #000;
margin: 0px;
overflow: hidden;
}
......@@ -30,9 +30,6 @@
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
......@@ -46,10 +43,15 @@
var camera, scene, renderer, controls, objects = [];
var particleLight;
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
function init() {
init( font );
animate();
} );
function init( font ) {
container = document.createElement( 'div' );
document.body.appendChild( container );
......@@ -100,7 +102,7 @@
var reflectivity = beta;
var side = THREE.FrontSide;
var side = THREE.FrontSide;
if( ( betaIndex % 2 ) === 0 ) {
side = THREE.DoubleSide;
}
......@@ -124,20 +126,15 @@
}
}
}
function addLabel( name, location ) {
var textGeo = new THREE.TextGeometry( name, {
size: 20,
height: 5,
curveSegments: 10,
font: font,
font: 'gentilis',
weight: 'normal',
style: 'normal',
material: 0,
extrudeMaterial: 1
size: 20,
height: 1,
curveSegments: 1
});
......@@ -155,7 +152,7 @@
addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
addLabel( "envMap", new THREE.Vector3( -350, 300, 0 ) );
addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
......
examples/webgl_materials_variations_phong.html
浏览文件 @ f0e0f5be
......@@ -5,13 +5,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
body {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
background-color: #000;
margin: 0px;
overflow: hidden;
}
......@@ -31,9 +31,6 @@
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
......@@ -47,10 +44,15 @@
var camera, scene, renderer, controls, objects = [];
var particleLight;
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
function init() {
init( font );
animate();
} );
function init( font ) {
container = document.createElement( 'div' );
document.body.appendChild( container );
......@@ -81,7 +83,7 @@
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;
var cubeWidth = 400;
var numberOfSphersPerSide = 5;
var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
......@@ -89,9 +91,9 @@
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
var localReflectionCube;
for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
if( alphaIndex % 2 === 0 ) {
......@@ -127,21 +129,16 @@
}
}
}
function addLabel( name, location ) {
var textGeo = new THREE.TextGeometry( name, {
size: 20,
height: 5,
curveSegments: 10,
font: font,
font: 'gentilis',
weight: 'normal',
style: 'normal',
material: 0,
extrudeMaterial: 1
size: 20,
height: 1,
curveSegments: 1
});
......
examples/webgl_materials_variations_standard.html
浏览文件 @ f0e0f5be
......@@ -5,13 +5,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
body {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
background-color: #000;
margin: 0px;
overflow: hidden;
}
......@@ -30,9 +30,6 @@
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
......@@ -46,10 +43,15 @@
var camera, scene, renderer, controls, objects = [];
var particleLight;
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
function init() {
init( font );
animate();
} );
function init( font ) {
container = document.createElement( 'div' );
document.body.appendChild( container );
......@@ -128,16 +130,11 @@
function addLabel( name, location ) {
var textGeo = new THREE.TextGeometry( name, {
size: 20,
height: 5,
curveSegments: 10,
font: font,
font: 'gentilis',
weight: 'normal',
style: 'normal',
material: 0,
extrudeMaterial: 1
size: 20,
height: 1,
curveSegments: 1
});
......
examples/webgl_materials_variations_standard2.html
浏览文件 @ f0e0f5be
......@@ -5,13 +5,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
body {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
background-color: #000;
margin: 0px;
overflow: hidden;
}
......@@ -30,9 +30,6 @@
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
......@@ -46,10 +43,15 @@
var camera, scene, renderer, controls, objects = [];
var particleLight;
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
function init() {
init( font );
animate();
} );
function init( font ) {
container = document.createElement( 'div' );
document.body.appendChild( container );
......@@ -128,16 +130,11 @@
function addLabel( name, location ) {
var textGeo = new THREE.TextGeometry( name, {
size: 20,
height: 5,
curveSegments: 10,
font: font,
font: 'gentilis',
weight: 'normal',
style: 'normal',
material: 0,
extrudeMaterial: 1
size: 20,
height: 1,
curveSegments: 1
});
......
examples/webgl_modifier_subdivision.html
浏览文件 @ f0e0f5be
......@@ -20,10 +20,6 @@
<script src="js/modifiers/SubdivisionModifier.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>
<script>
var container, stats;
......@@ -77,16 +73,21 @@
new THREE.Vector3(0,50,150),
new THREE.Vector3(0,0,200) ] ]},
{ type: 'TextGeometry', args: ['&', {
size: 200,
height: 50,
curveSegments: 1,
font: "helvetiker"
}]},
size: 200,
height: 50,
curveSegments: 1
}]},
{ type: 'PlaneGeometry', args: [ 200, 200, 4, 4 ] }
];
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
geometriesParams[ 8 ].args[ 1 ].font = font;
} );
var loader = new THREE.JSONLoader();
loader.load( 'obj/WaltHeadLo.js', function ( geometry ) {
......
examples/webgl_modifier_tessellation.html
浏览文件 @ f0e0f5be
......@@ -47,10 +47,6 @@
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_bold.typeface.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
uniform float amplitude;
......@@ -105,10 +101,15 @@
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
init( font );
animate();
} );
function init() {
function init( font ) {
camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
camera.position.set( -100, 100, 200 );
......@@ -121,14 +122,12 @@
var geometry = new THREE.TextGeometry( "THREE.JS", {
font: font,
size: 40,
height: 5,
curveSegments: 3,
font: "helvetiker",
weight: "bold",
style: "normal",
bevelThickness: 2,
bevelSize: 1,
bevelEnabled: true
......
examples/webgl_shaders_vector.html
浏览文件 @ f0e0f5be
......@@ -29,10 +29,6 @@
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>
<script type="x-shader/x-fragment" id="fs">
varying vec2 vUv;
......@@ -99,10 +95,15 @@
t = !t;
}
init();
animate();
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
init( font );
animate();
function init() {
} );
function init( font ) {
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 100, 500 );
......@@ -114,14 +115,6 @@
var theText = "&"; // i % & j b 8
var options = {
size: 180,
height: 20,
curveSegments: 2,
font: "helvetiker",
bevelEnabled: false
};
group = new THREE.Group();
scene.add( group );
......@@ -132,7 +125,7 @@
wireframe: true
} );
textShapes = THREE.FontUtils.generateShapes( theText, options );
textShapes = font.generateShapes( theText, 180, 2 );
text3d = new THREE.ShapeGeometry( textShapes );
......
examples/webgl_shadowmap.html
浏览文件 @ f0e0f5be
......@@ -41,10 +41,6 @@
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_bold.typeface.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
......@@ -252,35 +248,38 @@
// TEXT
var textGeo = new THREE.TextGeometry( "THREE.JS", {
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
size: 200,
height: 50,
curveSegments: 12,
var textGeo = new THREE.TextGeometry( "THREE.JS", {
font: "helvetiker",
weight: "bold",
style: "normal",
font: font,
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
size: 200,
height: 50,
curveSegments: 12,
});
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
textGeo.computeBoundingBox();
var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
});
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
textGeo.computeBoundingBox();
var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = FLOOR + 67;
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
mesh.castShadow = true;
mesh.receiveShadow = true;
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = FLOOR + 67;
scene.add( mesh );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
// CUBES
......
examples/webgl_shadowmap_performance.html
浏览文件 @ f0e0f5be
......@@ -40,10 +40,6 @@
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_bold.typeface.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
......@@ -188,35 +184,38 @@
// TEXT
var textGeo = new THREE.TextGeometry( "THREE.JS", {
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
size: 200,
height: 50,
curveSegments: 12,
var textGeo = new THREE.TextGeometry( "THREE.JS", {
font: "helvetiker",
weight: "bold",
style: "normal",
font: font,
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
size: 200,
height: 50,
curveSegments: 12,
});
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
textGeo.computeBoundingBox();
var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
});
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
textGeo.computeBoundingBox();
var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = FLOOR + 67;
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
mesh.castShadow = true;
mesh.receiveShadow = true;
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = FLOOR + 67;
scene.add( mesh );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
// CUBES
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或