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?
Related
I am a beginner to three.js. I am trying to make a sphere a child of my camera in my scene. But the sphere doesn't appear in the scene anywhere. I assumed that the position of the sphere is set in such a way that it is behind or above the camera so it isn't visible because it moves with the camera.
But I tried using a second camera in order to view where the object is with respect to the first camera but the sphere isn't visible anywhere in the scene.
The sphere is visible when I don't make it a child of the camera.
Is there an easier way to do it or an I missing something.
The camera must be added to the scene graph if the camera has a (renderable) child.
The camera looks down its local negative-z axis, so to ensure the child is visible, set the z-coordinate of the child's position to a negative value.
scene.add( camera );
camera.add( child );
child.position.set( 0, 0, - 100 );
three.js r.94
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
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
I'm trying to create a shadow in my orthographic scene in three.js. I'd like to have a directional light so the shadow is offset from all objects equally in the scene. I am however having problems using DirectionalLight.
My first problem is that I can't get the shado to cover the entire scene, only part of it ever has a shadow. I played with the light's frustum settings, but can't figure out how to get it to cover the scene. Ideally I'd want the frustrum to match that of the camera.
The second problem is that the shadows aren't "clean". If I use a SpotLight the shadows have nice crisp borders (but obviously not the universal directionality I want). When I use a DirectionalLight the borders are misshappen and blurry.
In the samples the tile is a simply box created with CubeGeometry.
How can I create an ortographic directional light source for my scene?