Three之材质Material

你华还是你华

于 2024-09-03 20:00:00 发布

阅读量854

点赞数 29

文章标签：材质数码相机 webgl threejs

本文链接：https://blog.csdn.net/weixin_44103733/article/details/141860095

版权

本文目录

前言
一、基础材质
二、标准材质
- 2.1 特点及属性
- 2.2 代码及效果
三、深度材质
四、法向材质
五、朗伯材质
六、Phong式材质
七、粒子材质
八、着色器材质
九、其他材质

前言

Three.js中的材质（Material）是独立于物体顶点信息之外的与渲染效果相关的属性，它决定了物体的外观，如颜色、纹理、光滑度、透明度等。Three.js提供了多种材质类型，以满足不同场景的需求。以下是对Three.js中几种常见材质的简单介绍。更多材质文档请点这里。

一、基础材质

1.1 特点及属性

基础材质（MeshBasicMaterial）

特点：不受光照影响，可以渲染基础的平面或几何体。
常用属性：
- color：材质颜色。
- wireframe：是否以线框模式渲染物体。
- opacity：透明度，与transparent属性一起使用。
- map：纹理贴图。

1.2 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 2, 5);
        camera.lookAt(0, 0, 0);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight)
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)
        // 加载贴图
        const loader = new THREE.TextureLoader();
        const texture = loader.load("../images/rabbit.png")

        // 设置Mesh（网格），网格包含一个几何体以及作用在此几何体上的材质
        const cube = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1), 
            new THREE.MeshBasicMaterial({ map: texture})
        );
        // 将网格对象放入到我们的场景中
        scene.add(cube);

        // 控制器
        const control = new OrbitControls(camera, renderer.domElement)
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true

        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>

以下材质均以此代码基础上修改。

1.3 效果

在这里插入图片描述

二、标准材质

2.1 特点及属性

标准材质（MeshStandardMaterial）

特点：
- 基础性：作为最基础的材质类型，标准材质提供了材质设计的核心参数和功能，是学习和掌握更高级材质类型的基础。
- 通用性：适用于多种场景和对象，无论是简单的几何体还是复杂的模型，都可以通过调整标准材质的属性来达到所需的视觉效果。
- 灵活性：标准材质提供了丰富的参数调整选项，如颜色、反射、透明度等，使得用户可以根据具体需求灵活调整材质属性。
- 兼容性：大多数3D建模和渲染软件都支持标准材质，确保了在不同平台和应用场景下的兼容性和一致性。
常用属性：
- Color：材质的颜色(Color)，默认值为白色 (0xffffff)。
- roughness ：反射，材质的粗糙程度。0.0表示平滑的镜面反射，1.0表示完全漫反射。默认值为1.0。如果还提供roughnessMap，则两个值相乘。
- alphaMap：透明度，alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。
- refractionRatio ：折射，控制光线穿过透明或半透明物体时的弯曲程度，即折射效果。常用于模拟玻璃、水等材质的视觉效果。
- bumpMap：凹凸贴图,用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。
- emissive ：自发光，材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。

2.2 代码及效果

我们知道基础材质不受光照影响后，来试试标准材质，加入并修改代码：

// 增加灯光
const ambientLight = new THREE.AmbientLight(0x12121d)
const directionLight = new THREE.DirectionalLight(0xffffff, 0.7)
directionLight.position.set(5,5,5)
scene.add(ambientLight, directionLight)

并修改材质：
在这里插入图片描述
效果：

可以看到灯光已经对我们的物体产生了影响。

三、深度材质

深度材质（MeshDepthMaterial）

特点：根据网格到相机的距离决定如何给网格染色，远的显示黑色，近的显示白色。
用途：常用于视觉效果或特殊效果中，如深度感知或阴影生成。

四、法向材质

法向材质（MeshNormalMaterial）

特点：根据物体表面的法向量计算颜色，用于显示表面的法线方向。
用途：调试或展示光照和阴影的计算结果。

五、朗伯材质

朗伯材质（MeshLambertMaterial）

特点：考虑光照的影响，创建颜色暗淡、不光亮的物体。
常用属性：
- color：材质颜色。
- ambient：对环境光的反射能力。
- emissive：自发光颜色。
- shininess：虽然该材质主要用于漫反射，但某些属性可能仍然适用。

六、Phong式材质

Phong式材质（MeshPhongMaterial）

特点：考虑光照的影响，可以创建光亮的物体，适合金属、镜面的表现。
常用属性：
- color：材质颜色。
- specular：镜面反射颜色。
- shininess：光泽度，控制高光的光斑大小。

七、粒子材质

粒子材质（SpriteMaterial）

特点：适用于粒子系统，用于模拟如雪花、小雨等效果。
用途：创建简单的二维图像或形状作为粒子，用于粒子效果模拟。

八、着色器材质

着色器材质（ShaderMaterial）
特点：使用自定义的着色器程序，直接控制顶点的放置方式以及像素的着色方式。
用途：提供高度的自定义和灵活性，但需要WebGL的基础知识和着色器编程能力。

九、其他材质

Three.js还提供了许多其他类型的材质，如面材质（MeshFaceMaterial，已在新版本中废弃）、物理材质（MeshPhysicalMaterial）等，每种材质都有其特定的用途和属性。

在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。

你华还是你华

关注

29
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
Three之材质Material

Three.js中的材质（Material）是独立于物体顶点信息之外的与渲染效果相关的属性，它决定了物体的外观，如颜色、纹理、光滑度、透明度等。Three.js提供了多种材质类型，以满足不同场景的需求。以下是对Three.js中几种常见材质的简单介绍。更多材质文档请点这里。
复制链接

扫一扫