Can I set the ambient property of a MeshPhongMaterial to false in a three.js imported Blender model? - three.js

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

Related

GLTF Exporter Lighting Issue

Just swapped from the older GLTF Blender exporter to the newer import/export version. Upon doing so, my meshes got significantly darker, and I can't figure out why.
mesh lighting sample :
The left is the older Blender > GLTF exporter, and the right is the newer one. Gamma is set to true, and I've played around with various options within Blender, as well as three.js lighting intensity, etc. (jacking the intensity up to make it look reasonable makes the shadows disappear). It renders the same in Mccurdy's GLTF viewer, and none of the lighting sliders get anywhere close to the lighting from the prior GLTF exporter. I need to use the new version for animation and morph playback purposes. Thanks as always for any suggestions.
Just in case it's helpful to anyone else, apparently the newer Blender > GLTF exporter defaulted to THREE.MeshStandardMaterial. I swapped to THREE.MeshLambertMaterial and the problem was solved.
const oldMat = child.material;
const newMat = new THREE.MeshLambertMaterial({
color: oldMat.color,
map: oldMat.map
});
child.material = newMat;

Ambient occlusion not showing in three.js

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

why doesn't the ambient light illuminate my whole model?

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/ ]

Is there a way to make a MeshPhongMaterial ignore all lights

I am using ThreeJS r67
I have a static room with lighting baked so lights do not need to affect it, but I also have a person in the room that does need the lighting. Is there a way to set all the materials in the room to ignore the lights?
According to the ColladaLoader.js (in three.js r67) lines 3550-3572 you can specify in the collada model file what type of material to create. You are probably using blinn or phong and you need to change that to constant.

exporting a scene from blender to threejs: every object has just one single material

I have made a small scene in blender (6 objects, each using 1 to 4 materials).
When exporting this (using the materials, and the scene option) with the dev exporter and loading it via:
var loader = new THREE.ObjectLoader();
loader.load( 'assets/scene.json', function ( scene ) { ...
And then checking the scene, I can see it has 6 children (good) and that each of the five children only has one MeshLambertMaterial (instead of the material mix from blender) bad.
Any hints on what I am doing wrong?
Those are btw basic materials (just a color basically) no textures or anything.
The scene renders correctly (minus the material mix).
Here is a link to the 113kb scene file (zipped): http://jppresents.net/static/blender/exportBug/scene.zip
Looking at the file I think all materials are there - so the problem must be the way I load it?
Not a solution, but a work around:
Since the only difference between all my materials was just the color, I have now applied exactly one material with a multi colored texture per object.
Then I uv-mapped the faces of the object to the colors corresponding to the previously set material color.
This was easy using the hotkey "shift + G" which lets you select all faces with the same material. (Then just assign them to the texture material, move/scale those in the uv-view to the part of the texture that matches the old color.)

Resources