I.gsap animation library
1.1 Basic use and principles
First npm installs and then imports
For example, let an object with an x-axis time of 5s
rotational coefficient of variation (math)
The speed profile of the animation can be found in the documentation on the official website
1.2 Control animation properties and methods
Of course there are ways to do this, animation completion, animation start, etc.
Some properties
It can also be realized to stop the animation at any time, given to a variable
Double-click to pause as well as resume
II. Lighting and Shadows in Detail
Adding Ambient Light
This kind of light is generally used to brighten, he has no shadow effect
Parallel light: similar to the sun
Defaults to light in this position toward the origin
It is also possible to change the point of illumination of the parallel light
Creating Shadows in Four Parts
Who creates shadows
Note: Objects can cast shadows as well as receive them, they don't just have to receive them on a flat surface
2.1 Linear Light and Shadow Detail Setup
Move the sphere back and forth on the z-axis, out of a certain range it will be sheared off
Parallel light has a range
Print this light to see its range
far is back, near is front
Now it's just a little farther out than just now, to the edge of 10 before it's intercepted
This shadow is jagged at this point
The default is 512.
2.2 Spotlights
Target is where the spotlight goes.
After setting the angle
If you want to set the light at the edges to decay slowly
Setting the speed of attenuation
2.3 Point light sources
A spotlight is diffused in one place, a point source is in all directions.
Distance and attenuation can also be set for point sources
III. Transparency textures and shadows
Add a transparency texture to an object, where black is fully transparent and white is opaque.
At this point the transparency is there, but the shadows are still normal
Just add alphatest, which means that anything greater than 0.5 is transparent, and anything less than 0.5 is opaque.
New problem at this point with streaking after pasting the mapping
This is a problem due to lighting and shadow formation
cure
Setting the bias of light shadows
Offsets to make shadows a little cheaper
IV. Large Scene Dynamic Cascading Shadow Settings
Add a camera helper to incorporate the lights
You can see that objects in the camera range have shadows over there are no shadows.
So if it's a really big scene, like changing the camera's shadow scene to be really big
You'll notice that the shadows appear jagged
Then the solution idea at this point is to show the shadows in modules and near and far
Also known as cascading shadows
Similar to this, the details are finer up close, and slightly blurrier in the distance, as it's not quite as visible from a distance
import (data)
These can be copied directly from the official example of this one diagram above from threejs
Then create cascading shadow instances
maxfar indicates how far the shadow is maxed out, how many levels of cascades, mode is the mode, parent is the parent of the current cascade shadow, mapsize is the size of the cascade shadow, and lightdirection is the position of the light.
Then set all materials that need to have shadows set to cascade shadows
Then the rendering needs to be updated all the time
At this point the lamps are no longer needed to cast shadows and are handed over to the cascade to do so.
If you want to set the light direction
Add soft shadows to achieve a smoother effect
The previous settings for lighting and shadows can also be eliminated.