three.js 之 color颜色

LKaiLi 2022-09-07 14 three.js

介绍

three.js 之 color 颜色

# color介绍

Color (opens new window) 作为three.js颜色数学库

支持css字符串风格、十六进制风格、RGB( 255,0,0 )、RGB( 1, 0, 0 ), HSL
three.js 内部默认使用的是RGB风格颜色, 如果使用非RGB颜色, 那么three.js会自动转换成RGB风格颜色

// 创建RGB风格颜色
const color = new THREE.Color(1, 1, 1)

// 如果使用非RGB颜色, 那么three.js会自动转换成RGB风格颜色
const color = new THREE.Color('#ff3040') // 字符串风格
const color = new THREE.Color(0x00577) // 十六进制风格
const color = new THREE.Color(255, 0, 0) // 其他RGB风格

复制代码

three.js的color属性参数:

.isColor判断是否是颜色属性
.r 红色通道的值在0到1之间。默认值为1。
.g 绿色通道的值在0到1之间。默认值为1。
.b 蓝色通道的值在0到1之间。默认值为1。

# 修改颜色

.setHex (opens new window) 修改十六进制的颜色

.setHSL (opens new window) 修改HLS值颜色

.setRGB (opens new window) 修改RGB值颜色

.setStyle (opens new window) 修改css字符串颜色

# 颜色随机

Mesh (opens new window) 网格中有两个参数 Mesh( geometry : BufferGeometry, material : Material )
- geometry —— （可选）BufferGeometry (opens new window)的实例，默认值是一个新的BufferGeometry。这个是是面片、线或点几何体的有效表述 (比如立方体三角体球体等)
- material —— （可选）一个Materials (opens new window)，或是一个包含有Material的数组，默认是一个新的MeshBasicMaterial (opens new window) 这个可以是贴图也可以是纯色Color (opens new window) material数组可以根据几何体的面进行设置

# 颜色随机的方法

RGB( 1, 0, 0 )风格的随机颜色

// 生成 0~1的 RGB( 1, 0, 0 )风格的颜色 Math.random()默认范围是0-1
const color = new THREE.Color(Math.random(), Math.random(), Math.random()) // const color7 = new THREE.Color( 1, 0, 0 );

复制代码

十六进制的随机颜色

// 十六进制的随机颜色
const color = new THREE.Color(Math.random() * 0xffffff)

复制代码

# 立方体的随机颜色

设置BoxGeometry (opens new window) 六个面的随机颜色通过MeshBasicMaterial (opens new window) 基础材质设置六个面的随机颜色

  // 创建一个立方体
  const sphere = new THREE.BoxGeometry(2, 2, 2)
  // 声明随机色数组
  const mats = []
  // 循环创建随机色
  for (let index = 0; index < sphere.groups.length; index++) {
    // 创建十六进制的随机色
    const color = new THREE.Color(Math.random() * 0xffffff)
    // 生成基础网格材质 并设置颜色
    const material = new THREE.MeshBasicMaterial({ color })
    // 把随机的颜色材质添加到数组中
    mats.push(material)
  }
  // 创建一个网格
  const sphereMesh = new THREE.Mesh(sphere, mats)
  // 把网格添加到场景中
  scene.add(sphereMesh)

复制代码

# 颜色混入

.lerp(color, alpha) (opens new window) 设置颜色的混入效果
- color 用于收敛的颜色。表示即将混入到那个颜色去 alpha 介于0到1的数字。表示混入的强度(越大混入颜色越深) 通常可以通过距离(或其他)方式进行计算

// 设置数量
const paramsConst = 10000
// 设置顶点颜色
const colors = new Float32Array(paramsConst * 3)

for (let index = 0; index < paramsConst; index++) {
  // 设置三个为一组
  const current = index * 3

  // 克隆颜色
  const mixColor = this.createdColor.clone()
  // 设置颜色混入
  mixColor.lerp(this.endColor, index / paramsConst)
  // 设置顶点颜色 rgb都要设置
  colors[current] = mixColor.r
  colors[current + 1] = mixColor.g
  colors[current + 2] = mixColor.b
}

复制代码

← three.js 之 Light光源 three.js 之 Texture纹理 →

来发评论吧~