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
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 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 THREE.JS scene where there's a plane geometry in the middle of the scene. The plane geometry has a camera added to it. I also am using this example http://mrdoob.github.io/three.js/examples/webgl_materials_lightmap.html to add a lightmap and am adding it to my plane geometry.
Psuedocode:
planeGeometry.add(camera);
planeGeometry.add(sphereGeometryLightMap);
The problem is that when I try to rotate the sphere geometry on any axis, nothing happens. I tried using .rotation and setting the matrix4. Why is it that I can't rotate this sphere object when added to another object? How can I work around this?
You don't need to add the camera to the planeGeometry.
Also I assume that sphereGeometryLightMap is of type THREE.Mesh in which case you need to add it to the scene. Not to the planeGeometry.
If you want the sphereGeometry relative to the planeGeometry you can do:
var object = new THREE.Object3D();
object.add (planeGeometry);
object.add (sphereGeometry);
Before you add the geometries to the object you position them relative as you want.
Then, instead of modifying the planeGeometry, you modify the object.
I want the sprite in the scene don't change the size when the camera zoom in or out. and the sprites use different canvas texture as the material.
I found that the sizeAttenuation in ParticleBasicMatierial can work for me. But if I use the WenGLRenderer, I must use ParticleSystem instead of the Particle with the CanvasRenderer.
I currently use ParticleSystem to contain only one vertex, and every vertex correspond to one ParticleSystem, so there are about 800+ ParticleSystem in my scene, this can work, but consume a lot.
Obviously, I can't use "HUD" as the example in three.js source, because the sprites are all in 3D scene.
Can some one help me. Or add the sizeAttenuation to Sprite Material! Thanks!
If you want to prevent size attenuation with sprites, and you are using a perspective camera, you can set the sizeAttenuation property of your material to false:
var material = new THREE.SpriteMaterial( {
color: 0xffffff,
map: texture,
sizeAttenuation: false
} );
This feature was added in three.js r.96.
EDIT: Updated to three.js r.96
For some reason I am getting flicker on any objects with using MeshFaceMaterial while I have a pointlight in the scene. Ambient and Directional lights are fine.
This is unfortunate, the pointlight adds an extra level of realism to the scene. If I remove the pointlight all is well. Pseudo code:
light = new THERE.PointLight(0xffffff,0.5);
scene.add(light);
loadTerrain();
mesh = new THREE.Mesh(cominedGeometry,new THREE.MeshFaceMaterial(materialArray))
scene.add(mesh);
I've tried loading the light before and after all other objects have loaded, no change in the flickering.
Why is there flickering under these conditions? Is there any remedy for this?