Three.js - MeshNormalMaterial 材质

最新推荐文章于 2024-04-06 17:45:31 发布

「已注销」

最新推荐文章于 2024-04-06 17:45:31 发布

阅读量1.5k

点赞数

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/81455935

版权

本文介绍 Three.js 的 MeshNormalMaterial，这是一种利用法向量映射RGB颜色的材质。内容阐述了这种材质如何根据物体各面不同的法向量呈现独特色彩，并提供了示例代码链接，以及带有辅助箭头的示例，帮助读者直观理解每个面的法向量位置。

摘要由CSDN通过智能技术生成

MeshNormalMaterial是一种将法向量映射到 RGB 颜色的材质。
网格在每一个面上渲染的颜色都不一样，法向量是与面垂直的向量，由于一个物体各个面上的法向量都不同，所以每个面映射的颜色也不同。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180806/03-meshNormalMaterial.html
示例中将flatShading设置为true为了更好看到每个面的颜色。
并且为每个面都添加了一个辅助箭头，可以清晰看到每个面的法向量的位置。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MeshNormalMaterial 计算法向颜色的材质</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three-r93.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>
</head>
<body>
<script>

    let stats = initStats();
    let scene, camera, renderer, controls, guiControls;

    // 场景
    function initScene() {
   

        scene = new THREE.Scene();

    }

    // 相机
    function initCamera() {
   

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000);
        camera.position.set(0, 0, 250);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

    // 渲染器
    function initRenderer() {
   

        renderer = new THREE.WebGLRenderer({
   antialias: true