Drawing texture on lines with three.js - three.js

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.

Related

How can I use a whole sphere image to texture a portion of a sphere in THREE.js?

I'm simulating an earth using THREE.SphereGeometry with only 32x16 or 64x32 segments. It has very large flat spots several km deep. 1024x512 is nicer but not really an option. For the area I'm working in, I'd like to fill that area in with more segments so that the surface and the graphics match within centimeters.
I could use the phi and theta of SphereGeometry to define the portion I want...
But then I want to texture it. When I use the whole sphere texture for a portion, it squishes the whole image into that portion. Is there a way to just get the texture of the portion I want?
I'm new to UV mapping - are there options with that that can help?
This is more about geometry than level of detail. The LOD is very crude and I'm fine with that for now.

Multiple Textures on a Single Face/Plane

If I have a geometry, say
THREE.PlaneGeometry(400,400);
or
THREE.MeshBasicMaterial({map:new THREE.MeshFaceMaterial(materials)});
//multiple textures on only one face
How would I make it so that I have multiple textures on the same side of the plane?
Furthermore, how would I go about setting the coordinates of the texture and position of the texture on the Plane (or face)?
It should look something like this:
You can use shader material with textures as uniforms or look other approaches there, there and there.

Three.js Merge objects and textures

My question is related to this article:
http://blog.wolfire.com/2009/06/how-to-project-decals/
If my understanding is correct, a mesh made from the intersection of the original mesh and a cube is added to the scene to make a decal appear.
I need to save the final texture. So I was wondering if there is a way to 'merge' the texture of the original mesh and the added decal mesh?
You'd need to do some tricky stuff to convert from the model geometry space into UV coordinate space so you could draw the new pixels into the texture map. If you want to be able to use more than one material that way, you'd also probably need to implement some kind of "material map" similar to how some deferred rendering systems work. Otherwise you're limited to at most, one material per face, which wouldn't work for detailed decals with alpha.
I guess you could copy the UV coordinates from the original mesh into the decal mesh, and the use that information to reproject the decal texture into the original texture

Is there a way to draw only certain lines in wireframe of Plane Mesh in Three.js?

I want to be able to show or hide the diagonal lines in the wireframe of my PlaneGeometry mesh, as well as being able to show or hide vertical or horizontal lines. Is there a way to do this and retain the triangles in my mesh? I already have 'wireframe: true' set on the material and can color it. I've been able to do this in the past with OpenGL, is it possible with Three.js?
You can use, or modify to your liking, src/extras/helpers/GridHelper.js.
There is also src/extras/helpers/WireframeHelper.js.
See http://threejs.org/examples/webgl_helpers.html
EDIT: THREE.EdgesHelper has been added to the library. It will not render the diagonal lines of flat faces.
three.js. r.65

Three.js: Video Texture on Skybox

Can someone help with videotexture on cube in three.js with WebGLRenderer.
I am trying to use Three.js to render a cube with one-piece videotexture from one file without use
THREE.ImageUtils.loadTextureCube
instead image such as jpg, but I don't get visible cubes. Should ideally i need create something like 180 degrees half sphere video panorama but only with cube. That is, i want to put a texture to all faces of a cube, not cutting it, in the one stream because if I use different video textures on every face then this will affect the performance.
I am trying to use video texture on sphere like here
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
and all works fine, but i want use cube like here
http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_balls_refraction.html
but I don't get visible cubes.
I don't want to cut a movie file to six different parts to put them on every face of the cube as in this example.
Maybe other methods to overlay material on cube form one video file than using different textures for each face?
Thx and sorry for my english.

Resources