...

/

Simple Materials: MeshNormalMaterial

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
Mesh normal material 
Mesh normal material 

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 ...