Three JS face normals in scaled mesh - three.js

When I scale imported OBJ model, the face normals are not scaled.
Is there a method to correct face normals on a scaled mesh?
Actually using face.normal.multiplyScalar ( scale ); but this is not the ideal solution.

Related

Three.js plane inherit topography from set of meshes

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?

three.js flat color using FlatShading and a texture

I'm creating a terrain with three.js and texturing with some grass texture I found, and applying FlatShading so it looks low poly, but the shading only modifies that and I'm still seeing the texture applied, I need each face to have a flat color and not the texture, like this picture:
http://i.ytimg.com/vi/9WFBnc_gPMo/maxresdefault.jpg
Unity using PolyWorld asset, from a terrain with a grass texture for example, it applies flat shading and also uses a flat color as texture (predominant color?)
What you seem to want is inefficient, but one way to accomplish it would be to make sure that all three faceVertexUV values for each triangle face are the same: that is for a triangle ABC the UV coordinates are all, say (.4,.6),(.4,.6),(.4,.6)
This means that all pixels of the rendered triangle will have that one uniform UV and you'll always get the same texture color across the triangle (some filtering notwithstanding in very extreme foreshortening cases)

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

Changing scale of mesh changes lighting brightness of scene?

I needed to refactor my custom mesh creation a bit
from:
create mesh of unified sizes (SIZE,SIZE,SIZE), than scale them as needed (setting scale for each axis)
to:
create mesh with correct size, do not scale later
meshes are custom generated (vertices, faces, normals, uvs), nothing of this process was altered, worked like a charm before
=> resulting meshes are the same size, position, etc.
The whole scene setup stays the same: lights, shadowing, materials, yet when using the second approach the whole lighting is very very bright and super reflective, is that a known issue?
material used is MeshPhongMaterial with map, bumMap, specMap, envMap
using three.js r68, no error/warning in console
before:
https://cloud.githubusercontent.com/assets/3647854/3876053/76b8f260-2158-11e4-9e96-c8de55eaec9a.png
after:
https://cloud.githubusercontent.com/assets/3647854/3876052/76b7fa86-2158-11e4-9393-8f3eece04c0b.png
Did you rescale the normals in the mesh?
The mesh format probably needs normalized normals, in which case, the new normals are now incorrect, but would've been correct, if you hadn't rescaled.
Alternately, you say the lights haven't been changed, maybe they need to be appropriately redirected in the scene. (Assuming you're applying different scaling factors in each axis.)

How to apply texture to mesh without specifying UV's in geometry using three.js?

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.

Resources