I've set up a scene in Three.js with OrbitControls.js to allow for rotation and panning. I would like my lighting set-up to follow the camera, ensuring that the object in the scene is always illuminated. (Right now you can rotate to the "dark side" of the object).
I've tried to solve this problem by making each light a child of the camera:
scene.add(light);
camera.add(light);
However, this produce the desired effect. The only other way I can think of solving this problem is by keeping track of the camera's change in spherical coordinates and making the lights match those changes (but this is undesirable for a myriad of reasons).
I'm relatively new to Three.js so I'm hoping there is an easy solution that I'm just unfamiliar with. Thanks!
If you want you light to follow the camera, you can use a PointLight with the following pattern:
scene.add( camera );
camera.add( light );
three.js r.67
Related
I am having a issue with using TransformControl with Sprite materials. Transform control works good with Geometry materials. But when I attach a Sprite material, TransformControl's axis are always behind the Sprite material. Is this such a issue do you thing or what? [jsfiddle](http://jsfiddle.net/ccaymaz/u279drpm/)
Thank you
I have converted a mesh from .obj to json using the official converter (https://github.com/mrdoob/three.js/tree/master/utils/converters/obj). The mesh is displayed correctly from one side, but not from the other. I believe the issue is that it only has one side, basically a plane, and therefore all faces and their normals pointing in one direction.
How could I fix this?
Edit: I could add the mesh twice, and one time using material.side = THREE.BackSide;, but loading it twice doesn't seem like the best option to me.
Only front faces of triangle primitives are rendered by default when using WebGLRenderer. You can override that by setting:
material.side = THREE.DoubleSide; // or THREE.BackSide
The front face is determined by the winding order of the vertices.
If the triangle vertices are specified in counter-clockwise order (CCW), the front face will face towards you; if specified in clockwise order (CW), the front face will face away from you.
This behavior can be changed by the WebGLRenderer.setFaceCulling() method, but it is not likely you would find that necessary.
three.js r.75
I've to apply an alpha coloring filter to a point cloud like it's described on this link: https://www.mapbox.com/blog/colorize-alpha-image-filter/ to achieve a sort of heatmap.
I'm rendering a 2d point cloud on a texture and than render it into a plane using a custom shader that handle the colorize-alpha filtering.
The problem is that I don't understand how I can correctly zoom inside the texturized pointcloud but keeping the original size of the pointcloud points.
I've created a simplified example without a real colorize-alpha filtering, but with the structure of my render-to-texture: http://jsfiddle.net/q8fpt7eL/1/
The effect I want to achieve is exactly the same you can achieve when you draw directly the point cloud. On the jsfiddle you can just comment the RTT part and un-comment the render directly part to see what I'm speaking about.
//render to texture
//renderer.render(sceneRTT, cameraRTT, rtTexture, false);
//renderer.render(scene, camera);
//render directly the point cloud
renderer.render(sceneRTT, camera);
I've already tried to use the same camera, or to copy the camera position/rotation on the cameraRTT object but seems not working correctly. I've also tried with orthographic camera on RTT scene but without success.
Anyone have an idea how can I achieve my goal?
Thanks
On line 41, you are setting the OrbitControls to control the camera of the "plane scene", when you really want it to control the RTT scene. Try this:
new THREE.OrbitControls(cameraRTT, renderer.domElement);
That looks much better, you can zoom inside the point cloud.
Lastly, all you have to do is make camera orthographic and setup your plane so it fills the scene.
I'm implementing a little 3D maze game, rendering the walls as Meshes affected by a PointLight. Some objects will be implementes as Sprites, but I'm having an issue....the objects appear fully iluminated, a behavior like MeshBasicMaterial.
It's possible to have these Sprites affected by the light just like Lambert or Phong materials?
Instead of using a Sprite, why not use a PlaneGeometry with a MeshLambertMaterial, and keep the rotation of the plane in sync with the rotation of the camera so that the plane always faces the camera just as a Sprite does? See the related question Three.js - billboard effect, maintain orientation after camera pans for further details.
Having Sprites respond to lights is currently not supported. They are affected by Fog, however.
three.js r.62
I was wondering if there's a way to project a shadow without have a "ground" plane where project it.
I'd like to do that because the camera can be moved around the object and would be ugly see it pass through the ground.
I'm using Three.js latest-version with the WebGl renderer.
Yes this is possible by applying ShadowMaterial to the plane geometry. This material can receive shadows and is completely transparent. so you just position the plane geometry at the desired location in the scene and you are good to go. check out this. https://threejs.org/docs/#api/en/materials/ShadowMaterial
This is technically impossible, you could write a shader that renders the shadow on a transparent plane, that way you would not notice it when the "camera" goes through the plane, only when it goes through the shadow itself.
To do so you can lerp between the shadowratio and a transparent black or white in the pixel shader and then set the corresponding blending states on the rendering context.