Location>code7788 >text

ThreeJs-06 Lights and shadows in detail

Popularity:582 ℃/2024-12-11 03:56:22

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

GIF

rotational coefficient of variation (math)

image-20241128214756914

The speed profile of the animation can be found in the documentation on the official website

image-20241128215002275

1.2 Control animation properties and methods

Of course there are ways to do this, animation completion, animation start, etc.

image-20241128215200803

Some properties

image-20241128215321286

GIF

It can also be realized to stop the animation at any time, given to a variable

image-20241128215435858

Double-click to pause as well as resume

image-20241128215547134

II. Lighting and Shadows in Detail

Adding Ambient Light

This kind of light is generally used to brighten, he has no shadow effect

image-20241128215713865

GIF

Parallel light: similar to the sun

Defaults to light in this position toward the origin

image-20241128215940076

image-20241128220146024

image-20241128220120320

image-20241128220133926

It is also possible to change the point of illumination of the parallel light

image-20241128220257997

image-20241128220312060

Creating Shadows in Four Parts

image-20241128220442295

image-20241128220504137

Who creates shadows

image-20241128220531950

image-20241128220543681

image-20241128220550572

Note: Objects can cast shadows as well as receive them, they don't just have to receive them on a flat surface

image-20241128220636819

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

image-20241128225842782

Parallel light has a range

image-20241128225911266

Print this light to see its range

image-20241128230152414

far is back, near is front

image-20241128230143933

image-20241128230224691

Now it's just a little farther out than just now, to the edge of 10 before it's intercepted

image-20241128230246682

This shadow is jagged at this point

image-20241128230406432

The default is 512.

image-20241128230425752

image-20241128230437585

2.2 Spotlights

Target is where the spotlight goes.

image-20241202222227398

image-20241202222257316

After setting the angle

image-20241202222452216

image-20241202222441442

If you want to set the light at the edges to decay slowly

image-20241202222603605

image-20241202222556576

Setting the speed of attenuation

GIF

2.3 Point light sources

A spotlight is diffused in one place, a point source is in all directions.

image-20241202223924686

image-20241202223934578

Distance and attenuation can also be set for point sources

image-20241202224159648

image-20241202224151140

III. Transparency textures and shadows

Add a transparency texture to an object, where black is fully transparent and white is opaque.

image-20241202224758219

At this point the transparency is there, but the shadows are still normal

image-20241202224839208

image-20241202224905647

Just add alphatest, which means that anything greater than 0.5 is transparent, and anything less than 0.5 is opaque.

image-20241202225016165

image-20241202225037314

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

image-20241202225211278

Offsets to make shadows a little cheaper

GIF

IV. Large Scene Dynamic Cascading Shadow Settings

Add a camera helper to incorporate the lights

image-20241202225536814

You can see that objects in the camera range have shadows over there are no shadows.

GIF

So if it's a really big scene, like changing the camera's shadow scene to be really big

image-20241202225741339

You'll notice that the shadows appear jagged

image-20241202225813878

image-20241202225753220

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

image-20241202230154511

import (data)

image-20241202230235699

These can be copied directly from the official example of this one diagram above from threejs

image-20241202230325297

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.

image-20241202230427224

Then set all materials that need to have shadows set to cascade shadows

image-20241202230644039

Then the rendering needs to be updated all the time

image-20241202231032394

At this point the lamps are no longer needed to cast shadows and are handed over to the cascade to do so.

image-20241202231311960

GIF

If you want to set the light direction

image-20241202231438017

Add soft shadows to achieve a smoother effect

image-20241202231509943

image-20241202231517749

The previous settings for lighting and shadows can also be eliminated.

image-20241202231536114