Three.js - MeshNormalMaterial

此材质使用面的法线向量的 x/y/z 值的大小来计算和设置面上显示的颜色的红/绿/蓝值。

它是如何工作的? - x 为红色，y 为绿色，z 为蓝色，因此面向右侧的物体为粉红色，面向左侧的物体为浅绿色，向上的物体为浅绿色，向下的物体为紫色，面向屏幕的物体为淡紫色。

const geometry = new THREE.BoxGeometry(2, 2, 2)
constmaterial = new THREE.MeshBasicMaterial()
const cube = new THREE.Mesh(geometry,material)

示例

在下面的示例中，您可以看到每个面的颜色都基于面的法线面。

mesh-normal.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js - Cube</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
            Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
   </head>
   <body>
      <div id="threejs-container"></div>
      <script type="module">
         // Using mesh normal material
         // each face has different color
         import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js"
         // GUI
         const gui = new dat.GUI()
         // 尺寸
         let width = window.innerWidth
         let height = window.innerHeight
         // 场景
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // 相机
         const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 100)
         camera.position.set(0, 0, 10)
         const camFolder = gui.addFolder('Camera')
         camFolder.add(camera.position, 'z').min(10).max(60).step(10)
         camFolder.open()
         // cube
         const geometry = new THREE.BoxGeometry(2, 2, 2)
         const material = new THREE.MeshNormalMaterial()
         const materialFolder = gui.addFolder('Material')
         materialFolder.add(material, 'wireframe')
         materialFolder.open()
         const cube = new THREE.Mesh(geometry, material)
         scene.add(cube)
         // 响应性
         window.addEventListener('resize', () => {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.render(scene, camera)
         })
         // 渲染器
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         const controls = new OrbitControls(camera, renderer.domElement)
         // 动画
         function animate() {
            requestAnimationFrame(animate)
            cube.rotation.x += 0.005
            cube.rotation.y += 0.01
            controls.update()
            renderer.render(scene, camera)
         }
         // 渲染场景
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
         animate()
      </script>
   </body>
</html>

输出

threejs_materials.html