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?
Related
I am new to three.js and I created a classic sphere, wrapped with a world color map & bump map and an alpha map for clouds, and directional sunlight. How can I now add an earth at night texture only on the shadow side of the globe? The globe is rotating, so I couldn't just create 2 half-spheres.
I tried adding this grayscale mask to the texture, but it is also visible in daytime. I then tried illuminating the map with a different light aimed at the dark side, but couldn't selectively target only one material. I didn't quite understand if I need to use "emissiveMap".
Could I shine a light through a semi-transparent map/mask from the center of the earth to make the cities visible, or is there some type of "black light" to only make selected color/map areas shine in the dark?
I don't need any glowing effects, I just want it to be visible. Will I have to create individual light points or learn to use fragment shaders?
I need a way to render a sprite always over top of a 3DObject, but it also must disappear behind it when the camera is rotated.
I first tried disabling the depth-buffer write but this will always render the Sprite in front.
Is there a way to hide it when its behind, but prevent clipping with the Object?
Edit 1:
The Problem is not exactly about z-fighting because the depthbuffer values of the sprite and the object are not equal.
The Sprite is a Billboard, so it will always face the camera, but it clips with the object, when rotating the camera.
Thank you for your help
In processing there is a function that creates directional light in 3D. But i wanna create the same effect in 2D. I think i need a vector and color info so i can create a shadow effect on a image.
Like this:
The mouse becomes a point of light and when it moves around it changes the image creating a shadow effect on it.
I can't use function that are 3D like pointLight or directionalLight so any ideas where should i start?
I'm working with an orthographic view in three.js/WebGL renderer, and I want a magnifying glass that tracks with the user mouse. I'm looking for the best way of doing this that's efficient.
When working with html5 canvas raw commands, this was easy: I simply defined a circular clip region, zoomed my coordinates, and re-drew the whole scene. With 3d objects, it's less obvious how do to it.
The method I've found so far is to do the following:
Define a second camera that looks into the zoomed region. Set the orthographic clip coordinates to be small so that it doesn't need to do much work
Create a THREE.WebGLRenderTarget
Tell the renderer and all my line textures that the resolution is about to change
Render the scene into the RenderTarget
Add a CircleGeometry as a MeshObject at the spot at the mouse position (in world coordinate but above the rest of the scene, close to the camera). Call this the lens.
Give the lens the WebGLRenderTarget as a texture.
Go back to my default camera, reset all my resolution parameters, and redraw the scene with the 'lens' object added.
This works (see image below) but I'm worried about parts of it:
I have to render twice per frame
Lines don't draw well, because the resolution problems. I have to keep track of all materials that need to know screen resolution and update all of them twice per screen render.
Related problems:
I want to overlay some plot axes on top of this, and possibly gridlines. These would change as the view pans. I'm not sure if I should make these 3d objects, or do it in a 2d canvas context I lay overtop.
I want to overlay some plot lines, and have them show up sensibly in the zoomed view. "Sensible" here is hard to figure out: I don't want them too fat in the zoomed view, but I also don't want to scale them up as much as the image detail (which is being rendered as a texture onto Plane objects behind).
This is a long post, but I'm still new to three.js and looking for good ideas.
I have a house scene where it has number of walls, when i add directional or spot lights the light passes through walls irrespective of the direction of light positioned.How can i make my light not to pass the wall ?
That is not a way how the WebGL 3D rendering works. All materials will be affected by light. You can render a shadows: http://learningthreejs.com/blog/2012/01/20/casting-shadows/
but, that means the light on the Meshes will be always rendered and after this will be rendered a shadow. That means, if you have a meshPhong material with a high shininess, it will be rendered visible and darkened by the shadow, which is not physically possible in real.