Easy job for someone who knows shaders.
£40 GBP via PayPal.
Please message me if your interested and detail any questions you may have.
Requirements
A single ThreeJS webpage (zip) with a plane using a ShaderMaterial which has a transparent PNG on it (make sure parts of the PNG are transparent). This plane then needs to move from vector3(0,0,-20) to vector3(0,0,3), repeating/looping. The plane must start fading in at Z: -20 to -17 and then fade out from Z: -3 to 0 (these values will be editable via 4 variables, see requirements).
-
Use a PNG texture with transparent areas (transparent: true) on a Plane (PlaneGeometry)
-
Fade out in image at Z: -20 to Z: -17
1 float var for fade in start point (z) and 1 float var for fade in complete point (z) -
Fade out an image at Z: -3 to Z: 0
1 float var for fade out start point (z) and 1 float var for fade out complete point (z)
Note: That’s 4 variables for easy editing.
- fadeInStartZ
- fadeInEndZ
- fadeOutStartZ
- faddOutEndZ
Important: The shader must compute the Z of the plane being moved by the render/animation loop and not have threejs pass the z position or the alpha value of the plane in the render/animation loop to the shader. If your code requires values to be passed to it from the render/animation loop it will not be accepted as I can do this, I am trying to get the shader to do this itself.
Note: The PNG texture will have transparent areas and transparency must not be affected by the fade in or the fade out. Feel free to use any image for the plane you want just make sure it has some transparent areas on it to show that it doesn’t affect the alpha channel.