阅读数:8 评论数:0

一、material.emissive

在 Three.js 中，material.emissive 是一个材质属性，用来控制物体的 自发光 效果。这个属性的值通常是一个 颜色，表示物体自发光的颜色，它通过 THREE.Color 对象表示。自发光的颜色可以通过十六进制颜色值、RGB 颜色值或 THREE.Color 实例来设置。

即使物体没有任何外部光源照射，它也能以这种颜色发光。

1、使用十六进制颜色字符串

十六进制颜色通常以 # 开头，后跟六个十六进制数字。例如，#FF0000 表示红色，#00FF00 表示绿色。

material.emissive = new THREE.Color('#FF0000');  // 自发光为红色

2、使用RGB颜色

你可以传入 RGB 颜色值（范围 0-1），例如 new THREE.Color(1, 0, 0) 表示红色。

material.emissive = new THREE.Color(1, 0, 0);  // 自发光为红色

二、THREE.MeshPhysicalMaterial

THREE.MeshPhysicalMaterial 是 Three.js 中的一种材质类型，它扩展了 THREE.MeshStandardMaterial，提供了更多的物理特性和属性，用于创建更为真实的渲染效果.

1、常用属性

• clearCoat：控制高光涂层的强度（0 到 1）。
• clearCoatRoughness：控制高光涂层的粗糙度（0 到 1）。
• reflectivity：反射率，影响材质表面的反射程度。
• transparency：透明度，控制材质的透明程度。
• refractionRatio：折射率，控制折射强度。
• metalness：金属度，控制材质是金属还是非金属。
• roughness：粗糙度，影响材质的反射表面平滑度。

const material = new THREE.MeshPhysicalMaterial({
  color: 0x00ff00, // 绿色
  metalness: 0.5,  // 半金属
  roughness: 0.1,  // 光滑表面
  clearCoat: 1,    // 完全清漆层
  clearCoatRoughness: 0.05, // 清漆层略微粗糙
  reflectivity: 0.9, // 高反射
  transparent: true, // 启用透明度
  refractionRatio: 0.98 // 透明材质的折射率
});

三、material.clippingPlanes

material.clippingPlanes 允许你在材质级别应用裁剪平面，这些平面会影响该材质渲染的区域。平面一旦定义，只有物体位于平面“背面”或“前面”的部分会被渲染，其他的部分则会被裁剪掉。

clippingPlanes 是一个 数组，该数组包含了一个或多个 THREE.Plane 对象，每个 Plane 定义了一个裁剪平面。

// 创建一个裁剪平面
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);

// 创建一个材质，并设置裁剪平面
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000, // 红色
  clippingPlanes: [plane], // 仅渲染平面"正面"的部分
  clipShadows: true // 启用阴影裁剪
});

// 创建一个物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

THREE.Plane 是一个表示平面的类，它接受两个参数：

• 一个法向量（normal），确定平面的方向。
• 一个距离值（constant），表示平面到原点的距离。

四、material.map

material.map 决定了材质的表面颜色或纹理外观。它将一张 2D 图像（或程序生成的纹理）映射到 3D 模型表面上，从而改变模型的视觉效果。

material.map 的值通常是一个 THREE.Texture 对象，可以通过加载器（如 THREE.TextureLoader）加载图像文件，或者直接使用程序生成的纹理。

// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();

// 加载纹理贴图
const texture = textureLoader.load('path/to/texture.jpg');

// 创建材质并设置 map
const material = new THREE.MeshBasicMaterial({
  map: texture, // 将纹理贴图赋给材质
});

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

1、常用的纹理操作

（1）设置重复模式

• 通过 wrapS 和 wrapT 设置水平方向（S）和垂直方向（T）的重复模式。

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2, 2); // 在两个方向上重复两次

（2）偏移纹理

使用 offset 属性控制纹理的起始位置。

texture.offset.set(0.5, 0.5); // 偏移纹理

（3）旋转纹理

使用 rotation 属性设置纹理的旋转角度。

texture.rotation = Math.PI / 4; // 旋转 45 度

（4）动态更新纹理

可以使用动态纹理（例如使用 Canvas 生成的纹理）或程序化调整纹理属性。

texture.needsUpdate = true; // 更新纹理以反映更改

2、适用材质类型

material.map 可用于以下材质类型：

• THREE.MeshBasicMaterial：

  • 最基础的材质类型，简单地显示纹理，无光照效果。

• THREE.MeshStandardMaterial / THREE.MeshPhysicalMaterial：

  • 支持 PBR（物理渲染），可以结合光照和其他属性使用纹理。

• THREE.MeshLambertMaterial 和 THREE.MeshPhongMaterial：

  • 传统光照模型材质，也可以使用 map。

• THREE.SpriteMaterial：

  • 应用于精灵（Sprites）时，纹理控制精灵的外观。