Overriding VertexColors to shade a particular face - three.js

I have a PLY model that comes with all of its color information in the file, so I'm using {vertexColors: THREE.VertexColors} when I define its MeshBasicMaterial to pull these colors in. This all renders nicely.
I'd like to be able to raycast to the surface and update a face's color when the mouse is over it. I have no problems getting the face information from the ray intersects, and when I try updating the face's color using a model that's not defined by its vertexColors, everything works as it should. When I try it with any model that is defined this way, though, it never updates the selected face.
Any ideas on what's causing this or how to resolve it? Is there a way to override the color information that's set by THREE.VertexColors in order to highlight a face?
Thanks in advance.

Related

THREE.js Diagonal Lines when rendering. showdow.bias helps but not "castShadow" doesn't

screen_shot_showing_diagonal_lines
My THREE.js project is rendering these weird diagonal lines. I searched online and see that the issue is due to object casting shadow on itself.
While changing the shadow.bias property did help, it also created a gap between the object casting the shadow and the plane receiving the shadow ("peter-panning"). Note the directional light here is the only light source casting shadow in my scene.
this.directionalLight.shadow.bias = -0.001
I thought I might resolve this instead by changing the "castShadow" property of the ground plane meshes to false in the json file it is reading from so it will not cast shadow on itself but this doesn't seem to change anything in the rendering.
"castShadow": false,
"receiveShadow": true
I wonder if the shadow casting property is set somewhere else? or perhaps the issue is not with shadows at all (shadow.bias worked so it should be a shadows issue)? or there might be some other way to resolving this.
Thank you!

Material not showing correctly

I'm having an issue where the material is not showing correctly. I checked the MTL file and all looks correct but for some reason, the material seems to be flipped(I can see it through some parts while it should be the screen). Initially I thought there was something wrong with the MTL or the OBJ but here comes the funny part. On 3dviewer.net the model looks completely perfect(last screenshot).
Therefore, does anybody have a clue on what's happening?
By default, Three.js only renders the front side of faces, since there's often no reason to render the inside of objects. The problem is that the asset you've exported has the face of the screen pointing inwards. There are two ways of solving this problem:
Open the asset in a 3D editor, flip the direction of the faces that are pointing inward, and re-export.
You could change the default material.side attribute of your material. My best guess is that: material.side = THREE.BackSide would solve your problem, but you could try the other values in that documentation page.

Why do two faces appear invisible in ThreeJs?

I've an object in Blender. Because I want to do some UV-unwrapping using ThreeJS (see here) I determined that I need merge two of the sides to correctly unwrap.
So before exporting the .blend as a .obj object I selected the Tris to Quads face option to create a square face for the two sides as opposed to it being made up of two triangles. Here's what it looked like in Blender:
But when I import the .obj and .mtl file into ThreeJs I get this:
Is this a problem to do with me not updating the material being added to the new object?
The handles appearing white makes me think this is the case. If so how can I go about fixing it?
When I see something like this, the first thing I usually do is to set the material to side: THREE.DoubleSide. If that helps, the problem has to do with the normal-directions (so the face is actually there but isn't rendered because it is facing away from you).
To fix this, you should try the following:
In blender you can enable displaying of normal-directions in the right-hand menu (select "Face normals in section "Mesh Display").
You should now see if any of the normals are pointing inwards/in the wrong direction.
There is an automatic fix that works well for properly constructed meshes:
select object and switch into edit-mode (<Tab>)
select all vertices (shortcut &ltA>)
via menu "Mesh" > "Normals" > "Recalculate Outside" (shortcut <Ctrl>+<N>).

Can't change material color of imported mesh by code

I have recently imported both .blend and .fbx files into my game, and I would like to change their color in-game. To color them, I am using diffuse shaders, and have tried this command:
gameObject.GetComponent<MeshRenderer>().material.color = Color.red;
as well as this command:
gameObject.GetComponent<MeshRenderer>().material.SetColor("_Color", Color.red);
For some reason, both of these work perfectly on pre-generated Unity cubes, but not on my models, even though they have the mesh renderer component. Any suggestions?
There could be several reasons why your code doesn't work.
I would recommend changing the color of your object in the Editor, if it works - your objects are fine.
_Color is just a label, that usually marks the Main Color. Open your shader and check if the label _Color exists or not. Please check this from unity documentation http://docs.unity3d.com/ScriptReference/Material.SetColor.html
maybe you are changing the _Color of the parent object, but the material you are looking at belongs to the child object.

Three.js shadow map stripes in each light (now simplified, and with jsfiddle!)

I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.

Resources