Could someone please enlighten me as to how I add simple 2D text to a scene in three.js? I don't need fancy text geometry.
The purpose of the text is to dimension a 3D rotatable version of this: http://img225.imageshack.us/img225/9823/capturespm.png
You can generate the text with a 2D context, then convert it to a texture and finally display it in 3D space as a particle/billboard.
Related
I use a 3D model 3DDFA for face. I have an image 2D, and I want to apply it on the 3D face like a texture. How to do it in C++ ?
Thank you
I've been looking for a solution to this problem for a project I'm working on. I'd like to know if there is a way to click on a plane geometry and draw onto it, paint style, and have the texture update as you draw on it.
After this, is there a way to save that texture while in the browser now that you've edited it?
You could use raycasting to determine the UV texture position where the mouse intersection takes place. Raycaster.intersectObject returns an array of objects, one of its properties is .uv. You can see it in action in this demo.
You can use a 2D <canvas> as the source of the texture. Once you have the UVs from the intersection, you could use that position to draw on the canvas as demonstrated in this other demo
I'm trying NPR with three.js. I'm new with computer graphics. I want to extrude the lines segments and put textures on it. Is it possible to put texture after extruding the line segments using ExtrudeGeometry or should I first triangulate the lines, and then put texture on it?
Thanks in advance.
can any one help me to display text on the 3D space Three.js.
Simple I want function that get the message and coordinate to display. and function to remove the text. I tried for two week but i give up.
Have look at this
http://threejs.org/examples/webgl_geometry_text.html#FF0075111#three.js
set the coordinates as the mesh.position
I would like to play around with testing a 3D map, of sorts. At it's simplest, one flat pane, with map lines etc. drawn onto it, flat (as if I was drawing onto an HTML canvas). But I want that pane to be movable in 3D space.
I know that I can make a flat pane in three.js very simply, but is it possible to implement some sort of 'custom texture' that would allow me to programmatically draw onto this pane?
It is called render-to-texture in webGL.
Three.js provides WebGLRenderTarget which can be used as image source for further textures. You render your scene to WebGLRenderTarget instead of main WebGL screen. Then you use this WebGLRenderTarget as image source for the texture.
A lot of 2D post-processing works like this. They render the world to 2D texture, then use fragment shaders to apply per-pixel postprocessing code, like blurring.
For examples, see e.g. http://mrdoob.github.com/three.js/examples/webgl_postprocessing.html
It renders the scene for 2D postprocessing, but the theory is the same.
Here is the WebGLRenderTarget setup code:
https://github.com/mrdoob/three.js/blob/master/examples/js/postprocessing/EffectComposer.js#L14