RayChart

Appearance

材质系统 ​

材质参数按使用频率分为三个层级，大多数情况只需要用 ⭐ 常用属性。

常用属性 ​

满足 90% 的使用场景。

color ​

  • 类型: string
  • 默认值: 自动分配
  • 说明: 材质的基础颜色
  • 使用频率: ⭐⭐⭐⭐⭐
javascript
{
  itemStyle: {
    color: '#42b883'
  }
}

opacity ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 1
  • 说明: 不透明度，0 完全透明，1 完全不透明
  • 使用频率: ⭐⭐⭐⭐
javascript
{
  itemStyle: {
    color: '#42b883',
    opacity: 0.8  // 80% 不透明
  }
}

metalness ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 0.3
  • 说明: 金属度，0 非金属，1 完全金属
  • 使用频率: ⭐⭐⭐⭐
javascript
{
  itemStyle: {
    metalness: 0.8  // 金属质感
  }
}

roughness ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 0.5
  • 说明: 粗糙度，0 光滑镜面，1 完全粗糙
  • 使用频率: ⭐⭐⭐⭐
javascript
{
  itemStyle: {
    roughness: 0.2  // 光滑表面
  }
}

emissive ​

  • 类型: string
  • 默认值: '#000000'
  • 说明: 自发光颜色，配合后处理可产生发光效果
  • 使用频率: ⭐⭐⭐
javascript
{
  itemStyle: {
    emissive: '#42b883',
    emissiveIntensity: 0.5
  }
}

emissiveIntensity ​

  • 类型: number
  • 范围: 0-∞
  • 默认值: 0
  • 说明: 自发光强度
  • 使用频率: ⭐⭐⭐

进阶属性 ​

特殊视觉效果，按需使用。

透明和混合 ​

transparent ​

  • 类型: boolean
  • 默认值: false
  • 说明: 是否启用透明渲染
  • 使用场景: 玻璃、水等透明材质
javascript
{
  itemStyle: {
    transparent: true,
    opacity: 0.5
  }
}

side ​

  • 类型: 'front' | 'back' | 'double'
  • 默认值: 'front'
  • 说明: 渲染哪一面
  • 使用场景: 需要看到内部的透明物体
javascript
{
  itemStyle: {
    side: 'double',  // 双面渲染
    transparent: true
  }
}

反射和环境 ​

reflectivity ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 0.5
  • 说明: 反射率
  • 使用场景: 镜面、水面等高反射材质
javascript
{
  itemStyle: {
    metalness: 0.9,
    roughness: 0.1,
    reflectivity: 0.9  // 高反射
  }
}

envMapIntensity ​

  • 类型: number
  • 范围: 0-∞
  • 默认值: 1
  • 说明: 环境贴图强度
  • 使用场景: 增强环境反射效果
javascript
{
  itemStyle: {
    metalness: 0.8,
    envMapIntensity: 1.5  // 增强环境反射
  }
}

清漆层（车漆效果） ​

clearcoat ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 0
  • 说明: 清漆层强度
  • 使用场景: 汽车漆面、钢琴烤漆
javascript
{
  itemStyle: {
    color: '#ff0000',
    metalness: 0.8,
    clearcoat: 1.0,
    clearcoatRoughness: 0.1
  }
}

clearcoatRoughness ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 0
  • 说明: 清漆层粗糙度

镜面反射 ​

specularIntensity ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 1
  • 说明: 镜面反射强度
  • 使用场景: 调整高光强度
javascript
{
  itemStyle: {
    specularIntensity: 0.8,
    specularColor: '#ffffff'
  }
}

specularColor ​

  • 类型: string
  • 默认值: '#ffffff'
  • 说明: 镜面反射颜色

调试和特效 ​

wireframe ​

  • 类型: boolean
  • 默认值: false
  • 说明: 显示线框模式
  • 使用场景: 调试、科技风格
javascript
{
  itemStyle: {
    wireframe: true
  }
}

flatShading ​

  • 类型: boolean
  • 默认值: false
  • 说明: 平面着色（低多边形风格）
  • 使用场景: Low-poly 风格

专业属性 ​

复杂物理效果，需要图形学知识。

玻璃和透射 ​

transmission ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 0
  • 说明: 透射率，光线穿透材质的程度
  • 使用场景: 玻璃、宝石等透明材质
javascript
{
  itemStyle: {
    transmission: 0.95,  // 高透射
    thickness: 0.5,
    ior: 1.5,
    roughness: 0.05
  }
}

thickness ​

  • 类型: number
  • 默认值: 0
  • 说明: 材质厚度，影响透射效果

ior ​

  • 类型: number
  • 范围: 1-2.333
  • 默认值: 1.5
  • 说明: 折射率 (Index of Refraction)
    • 空气: 1.0
    • 水: 1.333
    • 玻璃: 1.5-1.9
    • 钻石: 2.417

虹彩效果 ​

iridescence ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 0
  • 说明: 虹彩效果强度
  • 使用场景: 肥皂泡、蝴蝶翅膀、CD 光盘
javascript
{
  itemStyle: {
    iridescence: 1.0,
    iridescenceIOR: 1.3,
    iridescenceThicknessRange: [100, 400]
  }
}

iridescenceIOR ​

  • 类型: number
  • 范围: 1-2.333
  • 默认值: 1.3
  • 说明: 虹彩层折射率

iridescenceThicknessRange ​

  • 类型: [number, number]
  • 默认值: [100, 400]
  • 说明: 虹彩层厚度范围（纳米）

渲染控制 ​

alphaTest ​

  • 类型: number
  • 范围: 0-1
  • 默认值: 0
  • 说明: Alpha 测试阈值，低于此值的像素被丢弃

depthTest ​

  • 类型: boolean
  • 默认值: true
  • 说明: 是否启用深度测试

depthWrite ​

  • 类型: boolean
  • 默认值: true
  • 说明: 是否写入深度缓冲

polygonOffset ​

  • 类型: boolean
  • 默认值: false
  • 说明: 是否启用多边形偏移（解决 Z-fighting）

polygonOffsetFactor ​

  • 类型: number
  • 默认值: 0
  • 说明: 多边形偏移因子

polygonOffsetUnits ​

  • 类型: number
  • 默认值: 0
  • 说明: 多边形偏移单位

材质预设 ​

金属质感 ​

javascript
{
  itemStyle: {
    color: '#c0c0c0',
    metalness: 0.9,      // ⭐ 高金属度
    roughness: 0.1,      // ⭐ 低粗糙度
    envMapIntensity: 1.5
  }
}

磨砂质感 ​

javascript
{
  itemStyle: {
    color: '#42b883',
    metalness: 0.1,      // ⭐ 低金属度
    roughness: 0.9       // ⭐ 高粗糙度
  }
}

玻璃质感 ​

javascript
{
  itemStyle: {
    color: '#ffffff',
    transmission: 0.95,  // 🔬 高透射
    thickness: 0.5,      // 🔬 厚度
    ior: 1.5,           // 🔬 折射率
    roughness: 0.05,    // ⭐ 光滑
    transparent: true   // 🎨 透明
  }
}

车漆质感 ​

javascript
{
  itemStyle: {
    color: '#ff0000',
    metalness: 0.8,          // ⭐ 金属度
    roughness: 0.2,          // ⭐ 粗糙度
    clearcoat: 1.0,          // 🎨 清漆层
    clearcoatRoughness: 0.1  // 🎨 清漆粗糙度
  }
}

塑料质感 ​

javascript
{
  itemStyle: {
    color: '#42b883',
    metalness: 0,        // ⭐ 非金属
    roughness: 0.5,      // ⭐ 中等粗糙
    reflectivity: 0.3    // 🎨 低反射
  }
}

发光效果 ​

javascript
{
  itemStyle: {
    color: '#42b883',
    emissive: '#42b883',        // ⭐ 自发光颜色
    emissiveIntensity: 0.8      // ⭐ 自发光强度
  },
  postprocessing: {
    enable: true,
    bloom: {
      enable: true,
      strength: 1.5
    }
  }
}

虹彩效果 ​

javascript
{
  itemStyle: {
    color: '#ffffff',
    metalness: 0.9,                      // ⭐ 金属
    roughness: 0.1,                      // ⭐ 光滑
    iridescence: 1.0,                    // 🔬 虹彩强度
    iridescenceIOR: 1.3,                 // 🔬 虹彩折射率
    iridescenceThicknessRange: [100, 400] // 🔬 虹彩厚度
  }
}

快速选择指南 ​

我想要... ​

普通效果 → 只用 ⭐ 常用属性

  • color, opacity, metalness, roughness

特殊效果 → 加上 🎨 进阶属性

  • 透明: transparent, side
  • 反射: reflectivity, envMapIntensity
  • 车漆: clearcoat, clearcoatRoughness

物理真实 → 使用 🔬 专业属性

  • 玻璃: transmission, thickness, ior
  • 虹彩: iridescence, iridescenceIOR

使用建议 ​

从简单开始 ​

javascript
// ✅ 先用基础属性
{
  itemStyle: {
    color: '#42b883',
    metalness: 0.5,
    roughness: 0.5
  }
}

// ❌ 避免一开始就用复杂属性
{
  itemStyle: {
    transmission: 0.95,
    ior: 1.5,
    iridescence: 1.0,
    clearcoat: 1.0
  }
}

使用预设 ​

javascript
// ✅ 直接使用预设
const glassStyle = {
  transmission: 0.95,
  thickness: 0.5,
  ior: 1.5,
  roughness: 0.05,
  transparent: true
}

{
  itemStyle: {
    color: '#ffffff',
    ...glassStyle
  }
}

渐进增强 ​

javascript
// 第一步：基础效果
{
  itemStyle: {
    color: '#42b883',
    metalness: 0.8
  }
}

// 第二步：添加细节
{
  itemStyle: {
    color: '#42b883',
    metalness: 0.8,
    roughness: 0.2,
    envMapIntensity: 1.5
  }
}

// 第三步：完善效果
{
  itemStyle: {
    color: '#42b883',
    metalness: 0.8,
    roughness: 0.2,
    envMapIntensity: 1.5,
    clearcoat: 1.0,
    clearcoatRoughness: 0.1
  }
}

属性速查表 ​

属性层级使用频率典型值用途
color⭐极高'#42b883'基础颜色
opacity⭐高0.8透明度
metalness⭐极高0.3-0.9金属度
roughness⭐极高0.2-0.8粗糙度
emissive⭐中'#42b883'自发光
transparent🎨中true启用透明
clearcoat🎨低1.0车漆效果
reflectivity🎨中0.5-0.9反射率
transmission🔬低0.9-0.95玻璃透射
ior🔬低1.5折射率
iridescence🔬极低1.0虹彩效果

相关链接 ​