Understanding Points and Sprites
Explore how to create and control points and sprites in Three.js. Understand properties like color, size attenuation, opacity, and textures, and learn the differences between THREE.Sprite and THREE.Points for efficient 3D scene rendering.
Sprites in Three.js
We start with an example. Let’s open the sprite.js example in the below playground. Upon executing this example, we’ll see a minimalistic scene, containing a simple colored square:
Example: Sprite
Let’s execute the sprite.js example in the playground by clicking the “Run” button. Once the application is running, please click the provided link to view the output in a new window.
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-7': './samples/chapters/chapter-7/sprite.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',
}
}
Note: We can change the properties of the object from the right control panel in the output screen.
We can use our mouse to rotate around this scene. One thing we’ll notice is that no matter how we look at the square, it will always look the same. For instance, the following screenshot shows a view of the same scene from a different ...