I found this related question but I'm using a MeshLambertMaterial and my question is about ambient light:
Why doesn't my directional light affect the whole scene?
My model is about 150 feet long and the ambient light only illuminates about the front half of it. I've added point lights along the way but I still can't see the back of the model.
Why doesn't the ambient light illuminate the whole model?
Here is the model:
http://julio.broomstones.com/webgl/sheet/webgl_sheet.html
If you zoom in with the middle button you will see the end of the sheet. I've placed globes at the point lights. They do help but not enough.
The problem in fog and camera settings. Try change far propertie of fog and far propertie of camera (reducing these values to reduce the visible area). For example:
var far_clip_plane = 4000;
...
scene.fog = new THREE.Fog( 0x000000, 140, 2000 );
[ https://jsfiddle.net/gqpLxuf9/ ]
Related
I want to create a meshed object like the pic below. (Please ignore the coin besides it.)
The thing is, I want to set a light behind the meshed object and make the light scatter through the meshes. (it's almost like a lamp below.)
The camera will be located right in front of the meshed object, so the object itself doesn't need to be a 3d cube like this pic though.
I'm very new to three.js and was not able to find a way to make a object like the one described above.
geometry = new THREE.BoxGeometry(1, 1, 1);
material = new THREE.MeshPhongMaterial({ color: 0x000000 });
box = new THREE.Mesh(geometry, material);
scene.add(box);
Could anyone advise me how I can I achieve this?
I'm using the MeshStandardMaterial in three.js and when I create and apply the material, all maps work fine except for the aoMap, which has no effect on the model. I suspect this is because I don't have a 2nd set of UVs (my UV unwrapping is done through Blender and I don't manually apply any UV at all in three.js), as the documentation says:
The red channel of this texture is used as the ambient occlusion map.
Default is null. The aoMap requires a second set of UVs, and
consequently will ignore the repeat and offset Texture properties.
I've tried using the below code to solve this:
var geometry = mesh.geometry;
geometry.addAttribute( 'uv2', new THREE.BufferAttribute( geometry.attributes.uv.array, 2 ) );
but had no luck. How do I copy my UV map to the uv2 property, or wherever it is needed to make ambient occlusion work?
An aoMap is an ambient occlusion map, and like its name says, it occludes ambient light. That is all it occludes.
There are currently three sources of ambient (or indirect) light in three.js: AmbientLight, HemiSphereLight, and LightMap.
So the aoMap occludes those three sources. It does not occlude direct light sources. Direct light sources include DirectionalLight, SpotLight, PointLight, and AreaLight.
three.js r.95
What kind of lighting are you using? I recreated your situation, and it works as expected. The things to look out for is that aoMap shows up with THREE.AmbientLight, but not with THREE.Spotlight. It also works if you use an envMap on your MeshStandardMaterial
I'm new to coding and everyday I learn something new. I want to have a masked scene with other 3D objects, that are from other scenes, to be behind and around it. At this moment I'm stuck with a masked scene. Right now I have this working. As u can see the background is grey and other 3D objects, that are from other scenes and behind the masked scene, can't be seen because of it.
How can I make the backround from masked scene to be transparent with other 3D objects from other scenes?
I think it has something to do with the fragmentShader, because I can change the background color by changing this line "vec4 background = vec4(1.0, 1.0, 1.0, 0.0);",.
Thanks in advance for all the help!
Update
I understand that the background is transparent on this previous link, but I fail to create a new scene with new 3D objects that is visible and is outside the masked scene. Just helping me make a new scene on that previous link would help me out with my problem.
I use a directional light to cast shadow on the ground of my scene. I only have a single object. I decided to have a very small shadow to keep good shadow quality. The problem is I can't manage to shift the position of the shadow camera and keep it on top of the object.
I tried several things.
Targeting my object works but the center of the camera don't change, just its angle. I don't want this behavior. I want to keep the same light direction.
Changing the shadowCameraRight of the light but nothing change
Changing the shadowCameraRight of the shadowCamera, nothing change
changing the position of the sahdowCamera. The "debugger" moves but the shadow stop being drawn as if I did not do anyting
I think there must be a pretty easy way of doing this but I could not find it.
Edit :
var light = THREE.DirectionalLight(...);
var myObject = THREE.Mesh(); //moving everyFrame
//here I just want to move the shadowCamera so the object stay in the frustum
Best
Why not using an Object3D?
var light = THREE.DirectionalLight(...);
var myObject = THREE.Mesh();
val allTogether = new Object3D();
allTogether.add(light);
allTogether.add(myObject);
// here set light position you want (relative)
scene.add(allTogether);
In your loop move the Object3D not your mesh, so everything is moved along.
I'm doing a student project and I have a scene with an ambient light and a spotlight. I've imported a Blender model which has the line:
"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
in the JSON file.
Is there any way to turn off this property in a MeshPhongMaterial so that it only reacts to the spotlight and not the ambient light.
I've tried removing the line and setting it to zero but this has had no effect. Can I turn this property off? Or should I remove the ambient light from a scene and use a different type such as Directional?
Thanks for any help.
In practice, the ambient reflectance of the material should usually match the material color, also known as the diffuse reflectance. Doing so will likely make your model look better.
For example, you can do this
material.ambient.copy( material.color );
or
material.ambient.set( 0xff0000 );
three.js r.67