I am trying to render a "landscape", with three.js. Now I changed the material for the plane from MeshBasicMaterial to MeshLambertMaterial or MeshPhongMaterial and awaited to get some light effects rendered.
Strangely I see no rendering other than flat.
Can someone tell me, what I am doing wrong or what the actual requirements for Fragment rendering are?
Seems like I was missing plane.computeFaceNormals();.
I had:
plane.computeBoundingSphere();
plane.computeVertexNormals();
before and was expecting computeVertexNormals to call computeFaceNormals implicitly. Seems like this is not the case.
After changing to:
plane.computeBoundingSphere();
plane.computeFaceNormals();
plane.computeVertexNormals();
lighting works. Is there any documentation about under which circumstances the compute* functions need to be called?
And what is computeVertexNormals doing, when no face normals were generated yet?
Related
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.
I am having some difficulties getting shadows both working on my meshes. I want the mesh to both receive and cast shadows, but when I turn receive on I get some strange shading issues as seen below;
The other side however is fine, looks like this;
Initially thought it was a normal issue but all the normals look fine and are as expected. I have recomputed and done a normalsNeedUpdate = true on the geometry just in case. Anyone have any ideas on how to fix, or even what the cause may be?
r71.
I need anyone to help me about my work
Work here :
ivanvujnovic.com/Avatar_final/index.html
I would have a better rendering, like smooth shading or something else.
How can i do that?
Thank's
You already have smooth shading happening there. I believe you might be looking for 'pixel shading' or 'pixel lighting'.
This might be useful:
http://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/lighting.php
Looks like the normals are messed up in your model, or there is a glitch translating them with Three.js making for a bumpy look by messing up the lighting.
You could try to re-export your model and check any normal-related export options if the problem could be solved with using different configuration.
Or you could let Three.js try to recalculate new normals for your geometry, ignoring the ones existing in the model:
geometry.computeFaceNormals();
geometry.computeVertexNormals();
I'm currently working on something along the lines of a plugin for another program to add 3D capability to it, so I'm trying to put all the functionality i can from three.js into it, with the added goal of this being a good way to learn all the functionality of three.js firsthand.
I'm running into an issue now as i implement textures and materials that with mesh basic material, setting some things which the documentation on the main threejs.org site shows are features, doesn't actually do anything.
when i set a texture for either specularmap or lightmap nothing is actually showing up. Im pretty sure its not a mistake im making because setting the texture of the map works, but trying to set this same texture for the specularMap or lightMap is doing nothing. Does a regular texture work for these, or do i have to do something different?
I'd also like to know what the shading property does for mesh basic, because as far as i can see setting it to smoothshading/flatshading/noshading is doing nothing aswell.
MeshBasicMaterial does not respond to lights. Change your material to MeshLamberMaterial or MeshPhongMaterial, for example.
For MeshBasicMaterial and MeshLambertMaterial, the specularMap is used only to modulate the reflection when an environment map is used.
For any material, lightmaps require a second set of UVs. geometry.faceVertexUvs[ 0 ] contains the usual set of UVs; for a lightmap, you need to add geometry.faceVertexUvs[ 1 ], a second set of UVs.
For MeshBasicMaterial, the shading property only applies when an environment map is used. SmoothShading will yield smooth reflections; FlatShading will yield faceted reflections.
three.js r.66
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.