Simple Materials: MeshNormalMaterial
Learn how to use THREE.MeshNormalMaterial in Three.js.
The THREE.MeshNormalMaterial
The next material is also one where we won’t have any influence on the colors used in rendering. The easiest way to understand how this material is rendered is by first looking at an example:
Press + to interact
Example: Mesh normal material
Let’s click the “Run” button to execute the mesh-normal-material.js
example in the playground below and enable flatShading
:
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-4': './samples/chapters/chapter-4/mesh-normal-material.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', } }
Explore the properties of THREE.MeshNormalMaterial
Note: We can change the ...