THREE.LightProbe and THREE.LensFlare
Learn about the light probe as a source of light and to use lens flare effect.
The THREE.LightProbe
In recent versions of Three.js, a new light was added called THREE.LightProbe. This light is similar to THREE.AmbientLight but takes the cubemap of WebGLRenderer into account. This is the last light source that we’ll discuss here.
We talked a little bit about what a cubemap is. With a cubemap, we can show our models inside an environment. We used a cubemap to create a background that rotates with the view of the camera:
We can use the information from a cubemap to show reflections on our materials. Normally, though, these environment maps don’t contribute any light to our scene. With a THREE.LightProbe, however, we can extract lighting level information from the cubemap and use it to illuminate our models. So, what we’ll get, looks a bit like a THREE.AmbientLight, but it affects the objects based on their location in the scene and the information from the cubemap.
The easiest way to explain this is by looking at an example. We’ll see the following scene:
Example: Light probe
Let’s execute light-probe.js example in the playground below by clicking the “Run” button:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises
// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {
return {
module: {
rules: [
{
test: /\.glsl$/i,
use: 'raw-loader'
}
]
},
mode: 'development',
entry: {
'chapter-1': './samples/chapters/chapter-3/light-probe.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin(),
],
experiments: {
asyncWebAssembly: true
},
devServer: {
allowedHosts: 'all',
host: '0.0.0.0',
port: '3000',
static: [
{
directory: path.join(__dirname, 'assets'),
publicPath: '/assets'
},
{
directory: path.join(__dirname, 'dist')
}
]
},
mode: 'development',
}
}
In the preceding example, we’ve got a model inside a cave-like environment. ...