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?
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 have a MeshBasicMaterial which has a planegeomatry.the material is around the plane like an outline and will be green initially.i have a clock in the app.i need to reduce the length of the outline every seconds to alert user their time is running out.so the outline will flow from top of the plane clockwise fading and disappear when the time runs out.hope you get the idea.now can anyone help me how to achieve this.
One way to solve this: create a ring geometry and animate its property thetaLength using animejs or tweenjs.
Create a ring in a 3D app, that mapping coordinates that run down the length of the mesh. Then create a gradient texture, that is half black, half white, (1x256). Apply the texture to the material on the ring mesh. Animate the texture offset using animejs.
If you really want the best performance, create a procedural texture using glsl shader, and map that onto a plane.
I want to realize a 3D interactive globe with three.js and I wonder if there is a way to intersect over Sprites primitive with the Raycaster?
If you check the source code for RayCaster at
https://github.com/mrdoob/three.js/blob/master/src/core/Raycaster.js
it would appear that the intersectObject function only checks objects that are instances of THREE.Particle or THREE.Mesh, not THREE.Sprite. Possibly this is because sprites could be set to use screen coordinates, and so a ray that projects into your 3d scene wouldn't make sense in this situation, or if placed in the scene as the sprite image always faces the camera, it doesn't act like your standard 3d mesh.
Perhaps you could attach a PlaneGeometry or a very thin CubeGeometry to the position of your sprite, set its rotation to the rotation of the camera so that it is always parallel to the view plane of the camera like the sprite is, and then check for intersections with the mesh instead?
Is there a way to dynamically change the 'position' of the light which casts the shadow. I only want an area around the player casted with shadows, and not the whole map.
Can be done by moving the shadowCameraTop/Right/Bottom/Left and then updating the projection matrix, or setting the position of the light itself
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?