Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve threejs Sun and Shadow effect". In daily operation, I believe many people have doubts about how to achieve threejs Sun and Shadow effect. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to achieve threejs Sun and Shadow effect". Next, please follow the editor to study!

Fundamentals of Lighting and Materials

Common lights:

-Point light source (a point light source can be understood as a light emitting light in all directions at the same time, which we usually use to simulate a light bulb and can produce shadows)

-directional light (parallel light can be thought of as a beam of light from infinity, usually used to simulate sunlight and can produce shadows)

-Spotlight (spotlight literally means that, like stage lights, illumination highlights a specific arc range and can produce shadows)

-Ambient light (generally used to change the brightness of the overall scene and is one of the most commonly used light sources)

Here is a mention of the material: (just list the commonly used ones)

-mesh base material (MeshBasicMaterial, shadows are not supported)

-FBR material

-physical Standard material (MeshStandardMaterial)

-MeshPhysicalMaterial

-the above two FBR materials are better than specular mesh materials.

-MeshPhongMaterial (specular mesh material, highlight surface, specular reflection)

-MeshLambertMaterial (mesh Lambert material, dimmed, diffuse)

Here is a brief introduction, students who do not understand can learn about a certain material.

Sunlight

Add directional light-adjust position from east to west-adjust brightness and color-add transition simulated sunlight

Next, we introduce the focus of this paper, how to simulate the change of solar illumination. In fact, the principle is very simple, that is, add directional light, adjust the shadow relationship of the scene model, and change the position of parallel light, light intensity and color in real time according to time.

Overall calling code

Because it is a demo, so pay attention to the effect, everything is simple to achieve the function

Sun () {/ / change the directional light once in two seconds let iTun0 setInterval (() = > {this.initSun (I) ionization +}, 2000)}

Simple realization through the timer and write the corresponding position lighting information in advance. Mainly thoughts, which can be changed according to one's own needs.

The main purpose of this is to achieve the effect, and the sunlight should be adjusted according to the time of the system, including changing the soup and dressing according to the weather.

Manually adjust and save to json by passing in time and weather to make the conversion ~

Viewer.prototype.initSun = function (type) {let position = {} let color ='# ffffff' let intensity = 1 switch (type) {case 0: position = {x: 270,y: 150,z: 0} intensity = 5 break case 1: position = {x: 258, y: 170 Z: 0} intensity = 7 color ='# fcffc9' break case 2: position = {x: 245,180, z: 0} intensity = 10 color ='# ffe69f' break case 3: position = {x: 0, y: 100 Z: 0} intensity = 15 color ='# ffe69f' break case 4: position = {x:-245,180, z: 0} intensity = 10 color ='# e3894d' break case 5: position = {x:-258, y: 160 Z: 0} intensity = 10 color ='# ff8400' break default: position = {x:-270,150, z: 0} intensity = 8 color ='# ff8400' break} if (this.directionalLight) {this.directionalLight.setSun (position,color) Intensity)} else {this.directionalLight = new zhdSun () this.directionalLight.renderFn (this.renderFunction) this.directionalLight.init ({position, color, intensity, scene: this.scene, currentlayers: this.currentlayers})}} solar light class

Here is mainly the disassembly and analysis of solar light, the package is relatively rough, and individuals can optimize it as appropriate.

Import TWEEN from'@ tweenjs/tween.js'import {zhdObject} from'. / zhdObject'export class zhdSun extends zhdObject {constructor () {super () this.light = null}} / / due to the addition of the TWEEN animation library, remember to update the TWEENTWEEN.update () initialization in animate in real time

What we do here is to add directional light to the scene and set the range and distance of its shadow. Because I am involved in the level here, I set the level of directional light.

Directional light is the most troublesome of all lights for shadow adjustment. If you want directional light to produce the right shadow effect, the shadow generated and received by the model should be adjusted, and the exposure range of directional light should also be adjusted. In my effect picture, I wonder if you have noticed that the sun shines on the ground at noon to produce a rectangular range shadow. Here is a relatively imperfect version.

Cause: the directional light range is too small, but once you adjust the directional light range is too large, because the ground is loaded through multiple tiles, striped shadows will appear

The figure below is as follows

Solution: adjust the bias property of directional shadows to help reduce artifacts in shadows

Init ({position, color, intensity, currentlayers, scene}) {const directionalLight = new THREE.DirectionalLight (color, intensity) / / create a new parallel light source, the color is not white Intensity 1 this.light = directionalLight directionalLight.position.set (position.x, position.y, position.z) / / adjust the directional light to an appropriate position directionalLight.castShadow = true / / turn on / / set the shadow property of the directional light, that is, the length, width and height of a box Only objects within the set value will produce shadows const d = 100 / / Shadow range directionalLight.shadow.camera.left =-d directionalLight.shadow.camera.right = d directionalLight.shadow.camera.top = d directionalLight.shadow.camera.bottom =-d directionalLight.shadow.camera.near = 20 directionalLight.shadow.camera.far = 8000 directionalLight.shadow.mapSize.x = 2048 / / defines the width and height of the shadow map Must be an integer of 2 this power directionalLight.shadow.mapSize.y = 2048 / / A higher value will provide better shadow quality at the cost of computing time directionalLight.shadow.bias =-0.0005 / / solve the occurrence of striped shadows this.setlayers (directionalLight, currentlayers) scene.add (directionalLight) / / add this directional light source to the scene We can see that this light source return directionalLight} sets directional light information.

Set the information of directional light: including position, color, intensity

SetSun (position, color, intensity) {this.setTweens (this.light.position, position, 2000) this.light.color = new THREE.Color (color) this.light.intensity = intensity} Tween

Here is a brief introduction to TWEEN do not understand can see my previous article, mainly an animation library, here to do a simple package

SetTweens (obj, newObj, duration = 1500) {var ro = new TWEEN.Tween (obj) ro.to (newObj, duration) / / the changed position and animation time ro.easing (TWEEN.Easing.Sinusoidal.InOut) ro.onUpdate (function () {}) ro.start ()} so far, the study on "how to achieve threejs Sun and Shadow effect" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.