I have a solar system simulator I'm working on in Three.js where the sun has a PointLight at its center with an intensity of 2.5. This looks great while the planets are facing the sun, but the rest of the planet is completely dark. Is there any way I can add some kind of ambient light source that is less intense than the PointLight but bright enough to show some detail on the dark side of the planets?
Ambient light with a low color value (in hex this is between 0x000000 to around 0x666666) lightens up everything in your scene:
var ambientLight = new THREE.AmbientLight( 0x222222 );
In Three.js there is also Hemisphere Light which works like Ambient but you can control the light from top and the one coming from the bottom seperatly.
It is used to fake the reflection of light from the ground and adds a little more depth to your scene than just pure ambient light. See this demo for an example, also including a directional Light:
http://threejs.org/examples/webgl_lights_hemisphere.html
Related
I have a DirectionalLight that seems to work for basic glTF objects, but my main character glTF has an odd result: when she is rotated, the DirectionalLight light appears to be pinned in front of her. Notice how the tent (prism-shaped thing) in this scene has the correct lighting, but the character does not:
It's as if the light is rotating with her:
I don't know what else to check. Things I've checked:
- the camera has updateMatrixWorld each frame
- the DirectionalLight position and target.position have updateMatrixWorld each frame
What else should I be looking for?
EDIT: Could it be something to do with normals on this particular animated glTF?
I can't get light on wireframes inside the geometry.
For example I create IcosahedronGeometry (MeshPhongMaterial) and set point light. When side is set to DoubleSide or BackSide, I can see light on the faces. But when I set on wireframes, then in BackSide there is light on frames, but in DoubleSide there isn't.
In my opinion in DoubleSide and wireframes there should be light seen on the frames inside and outside the geometry.
I want to move and rotate the camera but keep a PointLight on the same position relative to the camera. I've read a bunch of threads saying that you can add the light object to the camera instead of the scene. Like so:
pointLight = new THREE.PointLight( 0xffffff );
pointLight.position.set(1,1,2);
camera.add(pointLight);
However this does not seem to work for me. Instead I now when the camera changes set the light's position by applying the cameras matrixWorld to my desired relative light position. This works, but adding the light to the camera seems like a cleaner solution.
I'm a doing something wrong or is adding light object to the camera deprecated?
Thanks!
You need to add the camera to the scene if the camera has a child object, such as a `PointLight'.
scene.add( camera );
three.js r.68
I'm trying to use CanvasRenderer (three.js) as a fallback for devices not supporting WebGL. Is there some comparison page with explanation what is different and cannot be used with CanvasRenderer?
I'm experiencing two main issues:
flat shading, lights are completely missing (is MeshPhongMaterial supported?), I don't see any lighting nor shadows (are shadows supported in CanvasRenderer)? All I see is the diffuse texture without any lighting. In WebGL my current setup is PointLight, DirectionalLight, softShadows, antialiasing and MeshPhongMaterial (with diffuse, bump, spec and env map)
this.materialM = new THREE.MeshPhongMaterial({
ambient : 0x050505,
color : this.model.color,
specular : 0xcccccc,
shininess : 100,
bumpScale : BUMP_SCALE,
reflectivity : REFLECTIVITY,
});
transparent polygon edges (I know it can be tweaked with material.overdraw = 0.5 yet it produces other artifacts (as it probably does only some scaling of polys along the normal?), but I can do with this one
Any help on 1. or some general overview of what is not possible in CanvasRenderer when comparing to WebGLRenderer is greatly appreciated!
three.js r68
CanvasRenderer has limitations.
MeshPhongMaterial is not supported in CanvasRenderer -- it falls back to MeshLambertMaterial.
MeshLambertMaterial is supported, but not when the material has a texture -- it falls back to MeshBasicMaterial. ( MeshBasicMaterial is rendered without regards to scene lights. )
Shadows are not supported.
material.overdraw = 0.5 is helpful in hiding polygon edges when the material is opaque. It may still leave artifacts if the material is transparent.
three.js r.68
Is there a simple way in three.js to specify a color for "dark"? That is, in a scene with light, the colors of an object fade to black. What I want is for them to fade to a different color. I want to specify what color "unlit" is. I'm using a MeshPhongMaterial in this particular case.
Answer: There is no way to do this in the current three.js version. I've selected an answer with possible workarounds.
It is called ambient light.
scene.add( new THREE.AmbientLight( 0x222222 ) );
The argument to the constructor is the color of the light.
When using MeshPhongMaterial, it is also advisable to set the ambient reflectance of the material to match the material's diffuse reflectance, also know as the color.
material.color.set( 0xff0000 );
material.ambient.set( 0xff0000 );
If you follow this advice, your scene should look pretty good.
three.js r.64