Is it possible to apply texture to mesh without specifying UV's in geometry in three.js ?
There are classes such as THREE.CubeGeometry, THREE.SphereGeometry, etc. that automatically generate the UV coordinates for you. However, if you are creating your own geometry from scratch (i.e., specifying vertex locations, creating faces, etc.) then the answer is no. Either you need to set the UV coordinates manually when creating the geometry, or you need to write a custom shader which determines the UV coordinates for any given point. Think about it this way: if you don't specify UV coordinates, the points on your geometry have no idea which point on your texture they should display.
Related
Custom geometry's mesh material gets distorted after applying matrix transformation to my custom geometry.
In the sample jsfiddle, I've included my custom TorusGeometry. My custom geometry is placed next to a built-in CylinderGeometry.
You can see the difference in material between these two meshes. If I remove the geometry transformation, both the mesh's materials look fine.
I guess, I'm messing the normals while doing matrix transformation, but not sure to fix it.
https://jsfiddle.net/arundhaj/nrdg2faL/
What's working:
I have a solution for loading in topography using terrain tiles. Each tile occupies a plane as mesh. The image on the plane can then be any map tile source. Each plane mesh is a child of an object3d and offset accordingly to create the overall terrain.
The Question:
I am not sure the best way to go about having an irregular shape inherit 3d surfaces. This shape could be drawn or imported as KML. Is there a way to use a vertex shader to inherit the topography? I would like the topography as a mesh so that I can interrogate the topography of the shape. In this way it is different from using a shader to paint the surface as a mesh result is needed.
I do not yet have code for this to share as I do not know where to start. Vertex shader? Constructive solid Geometry?
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.
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
I need to do vertex displacements using a texture map in Three.js.
Is there an existing material that supports that?
If not, what is the best way to duplicate an existing Three.js shader so that I can add in some vertex displacement calculations? I would like to keep existing functionalities such as shadows and wireframe on the material.
Vertex displacements using a texture map are supported by THREE.ShaderTerrain[ "terrain" ] and THREE.ShaderLib[ "normalmap" ].
Examples of their use can be found in http://threejs.org/examples/webgl_terrain_dynamic.html and http://threejs.org/examples/webgl_materials_normalmap.html.
If these do not suit your needs, then you will have to write your own shader. Doing so is not easy. It is best to modify an existing shader.
three.js r.61