I've added text to my scene using the code from https://threejs.org/docs/#api/geometries/TextGeometry
I cannot figure out how to change the extrude depth, which is much "thicker" than I would like. Here is the exact code I am using:
var loader = new THREE.FontLoader();
loader.load( 'fonts/font.json', function ( font ) {
var textGeometry = new THREE.TextGeometry( 'WELCOME', {
font: font,
size: 4,
height: 8,
amount: 8,//attempt to change the depth but doesn't work
} );
Is it possible to change the extrude amount for a text geometry?
Applying height and amount at the same time does not work. amount is an option for ExtrudeGeometry whereas height is intended for TextGeometry.
TextGeometry uses internally ExtrudeGeometry for geometry generation. In this context, height is mapped to amount.
three.js R92
Related
I use plugin «threex.dynamictexture.js» in my app and have some trouble with loading my font (I have trouble even using existing helvetiker_bold.typeface.json ). I use the following pattern:
function loadFont() {
var loader = new THREE.FontLoader();
loader.load('/threejs/fonts/helvetiker_bold.typeface.json', function (font) {
dynamicTexture = new THREEx.DynamicTexture(canvasWrapper.offsetWidth,canvasWrapper.offsetHeight);
// dynamicTexture.context.font = 'bolder 90px Helvetiker';
var geometry2 = new THREE.SphereGeometry( 5, 100, 100);
var material2 = new THREE.MeshBasicMaterial({
map : dynamicTexture.texture
});
var mesh2 = new THREE.Mesh( geometry2, material2 );
console.log(font);
dynamicTexture.texture.needsUpdate = true;
mesh2.position.set(10, 10, 10);
scene.add( mesh2 );
dynamicTexture.drawText('Hello', 100, 300, 'black', 'bolder 90px helvetiker');
});
}
After that I can see rendered text texture on my geometry, but the font-family is still the default. And if I use Arial instead Helvetiker(or helvetiker) the rendered text become Arial.
I looked everywhere, but found only about TextGeometry solution. By the way I could load my font-family using TextGeometry loader.
Can you help me? Thanks!
Seems you mix up system fonts with three.js fonts.
helvetiker_bold.typeface.json has nothing in common with Helvetiker.ttf. It's intended to be used for TextGeometry. To draw with "Helvetiker" on a canvas, you have to add/install Helvetiker.ttf to the fonts on your system.
If you use it for yourself, it's okay if you find and install the font you need. But the other users, who don't have such font on their system, will see writings with the default font.
The solution is to find a font from standard system fonts which is more or less similar to Helvetiker (or the font you would like to use/see).
I am facing difficulty in adding text to my three.js script. I have searched a lot but wherever i find a working model, it uses a previous version of three.js and thus i am not able to use it. Also textgeometry seems to not work. I wish to add 3d text and not 2d.
You should always check three.js's official examples. There are many hints with latest three.js for you.
http://threejs.org/examples/#webgl_geometry_text
http://threejs.org/examples/#webgl_geometry_text_earcut
http://threejs.org/examples/#webgl_geometry_text_pnltri
First, you need to load a font file with new THREE.FontLoader. The font file is supposed to be in JS file, like http://threejs.org/examples/fonts/optimer_bold.typeface.js. You can convert your font to JS with http://gero3.github.io/facetype.js/
var font;
var loader = new THREE.FontLoader();
loader.load( 'path/to/fontfile.js', function ( response ) {
font = response;
} );
Then make a text geometry with new THREE.TextGeometry class using the font.
var textGeo = new THREE.TextGeometry( text, {
font: font,
size: size,
height: height,
curveSegments: curveSegments,
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: bevelEnabled,
material: 0,
extrudeMaterial: 1
});
Then, make a mesh
new THREE.Mesh( textGeo, material );
I am trying to use THREE.Raycaster to show an html label when the user hover an object. It works fine if I use THREE.Mesh but with THREE.Sprite it looks like that there is a space that increases with the scale of the object.
The creation process is the same for both scenario, I only change the type based on USE_SPRITE variable.
if ( USE_SPRITE ) {
// using SpriteMaterial / Sprite
m = new THREE.SpriteMaterial( { color: 0xff0000 } );
o = new THREE.Sprite( m );
} else {
// using MeshBasicMaterial / Material
m = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
o = new THREE.Mesh(new THREE.PlaneGeometry( 1, 1, 1 ), m );
}
https://plnkr.co/edit/J0HHFMpDB5INYLSCTWHG?p=preview
I am not sure if it is a bug with THREE.Sprite or if I am doing something wrong.
Thanks in advance.
three.js r73
I would consider this a bug in three.js r.75.
Raycasting with meshes in three.js is exact. However, with sprites, it is an approximation.
Sprites always face the camera, can have different x-scale and y-scale applied (be non-square), and can be rotated (sprite.material.rotation = Math.random()).
In THREE.Sprite.prototype.raycast(), make this change:
var guessSizeSq = this.scale.x * this.scale.y / 4;
That should work much better for square sprites. The corners of the sprite will be missed, as the sprite is treated as a disk.
three.js r.75
I'm trying to rotate an image along it's Y axis, with the origin set to center of the image. But, the rotate animation is resulting in flickering. I tried to do the same in famo.us tutorials and could see the same there as well. Following is the modified code in the tutorial.
The tutorial link: http://famo.us/university/famous-101/animating/2/
Visit this page and replace the code in it with the following one.
The change in brief is, I'm using ImageSurface instead of Surface and applied rotateY.
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var ImageSurface = require('famous/surfaces/ImageSurface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();
var imgSurface = new ImageSurface({
content: 'http://www.wpclipart.com/recreation/games/card_deck/cards_symbols/playing_card_symbols.png',
size: [200, 200]
});
var surface = new Surface({
size: [100, 100],
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F'
}
});
var stateModifier = new StateModifier({origin: [0.5, 0.5]});
mainContext.add(stateModifier).add(imgSurface);
// stateModifier.setTransform(
// Transform.translate(50, 10, 0),
// { duration : 1000, curve: 'easeInOut' }
// );
stateModifier.setTransform(
Transform.rotateY(-Math.PI/4),
{ duration : 5000, curve: 'easeInOut' }
);
Any help would be appreciated.
Do you mean the flickering of the lines at the left and right?
This has to do with how the browser/GPU applies the 3d perspective transform on the image, but has nothing to do with famo.us really.
The image that you are using has a size of 505 x 499 pixels. Try resizing it using a graphics program to 200x200 and see whether you get better results.
The problem is that the rotating element is too close to the background and intersects it. If you position the rotating surface far enough in the z axis, the flickering, surely disappear.
Try something like this:
mainContext.add(new Modifier({transform: Transform.translate(0,0,100)})).add(stateModifier).add(imgSurface);
P.D: Sorry for my bad English...
I'm just getting started with webgl and was trying to make an animation based on a spritesheet. I've found an example and changed the spritesheet to my own. However even though I removed the white background, saved it as a transparant png, the animation still shows up with a white background.
This is the example I used:
http://stemkoski.github.io/Three.js/Texture-Animation.html
Is there any way how I can get rid off the white background?
Thanks in advance.
EDIT:
var runnerTexture = new THREE.ImageUtils.loadTexture( 'images/run.png' );
annie = new TextureAnimator( runnerTexture, 10, 1, 10, 75 ); // texture, #horiz, #vert, #total, duration.
var runnerMaterial = new THREE.MeshBasicMaterial( { map: runnerTexture, side:THREE.DoubleSide } );
var runnerGeometry = new THREE.PlaneGeometry(50, 50, 1, 1);
var runner = new THREE.Mesh(runnerGeometry, runnerMaterial);
runner.position.set(-150,25,0);
scene.add(runner);
To support PNGs with an alpha-channel, you have to modify the MeshBasicMaterial accordingly: There is an attribute 'transparent' which you could set to 'true'.
Try using the following line instead:
var runnerMaterial = new THREE.MeshBasicMaterial( { map: runnerTexture, side:THREE.DoubleSide, transparent: true } );
See also the reference from Material:
.transparent
Defines whether this material is transparent. This has an effect on
rendering as transparent objects need special treatment and are
rendered after non-transparent objects. For a working example of this
behaviour, check the WebGLRenderer code. When set to true, the extent
to which the material is transparent is controlled by setting opacity.