Preface:
Three.js is a package of WebGL interface is very good library, simplifying the WebGL many details, reducing learning costs, is a powerful tool for the current front-end developer to complete the 3D graphics, then today I will give you details on the next Three.js the difference between reference and various light sources in the scene.
For more intuitive display the characteristics of different light sources, I deliberately made a demo to distinguish between different types of light sources through animation features, demo will showcase a point light source, ambient light, parallel light, dome light, spot lights Fifth light source characteristics, to be able to directly experience the ball during movement of the light source and the light source affected by the object light position, is increased at the same position of a white light source to indicate the position of the light source, the object material Demo unified use MeshLambertMaterial material, Demo effect is as follows:
Preview Address: in-depth understanding of the source Three.js
1, the point light source PointLight
A point light source emitted from the point in all directions, the actual situation may be understood as a light bulb, the shadow of the object may be projected, the light source is turned on by setting the shadow a cast shadow = to true . Simply create a point light source code is as follows:
1 var light = new THREE.PointLight( '#ff0000', 1, 100, 2 ); 2 light.position.set( 50, 50, 50 ); 3 light.castShadow = true; 4 scene.add( light );
The above code new THREE.PointLight () is used to create a point light source, there are four variables in the process, followed by Color , Intensity , Distance , Decay .
Color :( optional parameter)) hex color light. The default value 0xffffff (white), color format is not supported rgba.
Decay : the amount of recession of light along a distance. The default value of 1. Simulate real-world light attenuation only need to set the decay value of 2 can .
2, ambient light source AmbientLight
All the objects of ambient light evenly illuminates the scene, the light source can not be projected shadow of the object, because there is no ambient light source direction, a simple code creates environmental light as follows:
1 var light = new THREE.AmbientLight( '#404040', 1 ); 2 scene.add( light );
The above code new THREE.AmbientLight () is used to create ambient light, ambient light is relatively simple, requires only two methods to create variables, followed Color , Intensity .
Color :( optional parameter)) hex color light. The default value 0xffffff (white), color format is not supported rgba.
Intensity :( optional) illumination intensity. The default value of 1, the value of the light intensity becomes larger, found minimum value is 0, the maximum is not limited.
3, the parallel light DirectionalLight
The parallel light is light emitted in a specific direction, such as the performance of such light infinity, from which the light is emitted in parallel, the parallel light is often used to simulate the effect of sunlight, the sun is far enough, so that we can infinity position of the sun, so we believe that the light from the sun are parallel, the parallel light source may be mapped shadow of the object, by setting castShadow = true is achieved, the code to create a collimated light source is as follows:
1 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); 2 scene.add( directionalLight );
The above code new THREE.DirectionalLight () is used to create a parallel light source, a creation method requires only two variables, followed Color , Intensity .
Color :( optional parameter)) hex color light. The default value 0xffffff (white), color format is not supported rgba.
Intensity :( optional) illumination intensity. The default value of 1, the value of the light intensity becomes larger, found minimum value is 0, the maximum is not limited.
4, a hemispherical light HemisphereLight
Simple code directly placed over the hemispherical scene light, color gradient from light color to the color of the sky light ground color of the light, the light can not cast shadows hemisphere, a light source to create the hemisphere are as follows:
1 var light = new THREE.HemisphereLight( '#ffffbb', '#080820', 1 ); 2 scene.add( light );
The above code new THREE.HemisphereLight () is used to create a point light source, there are four variables in the process, followed by Color , groundColor , Intensity .
Color :( optional parameter)) hex color light. The default value 0xffffff (white), color format is not supported rgba.
groundColor : (optional) the ground color of the emitted light. The default value 0xffffff (white), color format is not supported rgba.
Intensity :( optional) illumination intensity. The default value of 1, the value of the light intensity becomes larger, found minimum value is 0, the maximum is not limited.
5, a spotlight source SpotLight
Spotlight is emitted from a point in one direction, along a cone, it is farther away from the light, the greater its size, spot lights can be mapped shadow of the object, by setting castShadow = true is achieved, creating a light spot the code is as follows:
var spotLight = new THREE.SpotLight( '#ffffff', 1, 100, Math.PI / 4, 0.1, 0.1 ); spotLight.position.set( 100, 1000, 100 ); spotLight.castShadow = true; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; spotLight.shadow.camera.near = 500; spotLight.shadow.camera.far = 4000; spotLight.shadow.camera.fov = 30; scene.add( spotLight );
The above code new THREE.SpotLight () is used to create a point light source, there are four variables in the process, followed by Color , Intensity , Distance , angle , Penumbra , Decay .
Color :( optional parameter)) hex color light. The default value 0xffffff (white), color format is not supported rgba.
Intensity :( optional) illumination intensity. The default value of 1, the value of the light intensity becomes larger, found minimum value is 0, the maximum is not limited.
Distance : This indicates the distance from the light source to the light intensity of the 0 position. When set to 0, the light will never go away (from infinity). Default 0, arbitrary non-negative number may be provided.
angle : angle light scattering, maximum Math.PI / 2.
Penumbra : penumbra attenuation percentage converging cone. A value between 0 and 1. The default is 0.
Decay : the amount of recession of light along a distance. The default value of 1. Simulate real-world light attenuation only need to set a value of 2 can decay .
6, the planar light source RectAreaLight
Special light source plane, follow-up will be described separately.
