Three之材质Material

本文目录

前言
一、基础材质
- 1.1 特点及属性
- 1.2 代码
- 1.3 效果
二、标准材质
- 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.05control.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)

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

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