3.js - 反射率(reflectivity) 、折射率（ior）

没啥太大的感觉

反射率 reflectivity

概念


  反射率：指的是，材质表面反射光线的能力

  反射率，用于控制材质对环境光，或光源的反射程度

  反射率越高，材质表面反射的光线越多，看起来就越光亮

使用


  适用于，需要表现高反表面的材质，如：金属、镜子

  可以通过，调整反射率，来模拟不用材质的光泽度

注意事项


  1、
    反射率的具体实现效果，可能与three.js的版本和材质类型而异，

    在某些材质中，如：Mesh-Standard-Material，可能不直接提供'reflectivity'属性，而是通过其他方式（如：环境贴图、反射贴图）来间接控制反射效果

  2、在使用反射率时，需要考虑光源、材质的其他属性（如：金属度、粗糙度），以达到逼真的效果

折射率 ior

概念


  折射率，是指，光从一种介质进入另一种介质时，光线的传播方向会发生改变的现象；

  在3.js中，折射率用于，模拟透明、半透明材质（如：玻璃、水）对光线的折射效果，不同的材质具有不同的折射率；

使用


  适用于，需要表现，透明、半透明效果的材质

  通过设置折射率属性，可以模拟真实世界中，光线穿过透明材质时的弯曲现象

注意事项


  折射率属性的效果，通常在支持透明、半透明渲染的材质中体现，如：Mesh-Physical-Material

  在使用反射率时，需要考虑光源、材质的其他属性（如：透光率、粗糙度），以达到逼真的效果

代码自己看吧


// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
// 导入hdr加载器（专门加载hdr的）
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

//#region
const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer({
  antialias: true // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion

//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

// 每一帧根据控制器更新画面
function animate() {
  // 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`
  controls.update()
  // `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scence, camera)
  // 更新tween
  TWEEN.update()
}
animate()
//#endregion

// --------------------------------------------------------------
// --------------------------------------------------------------

// 设置贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('/public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', envMap => {
  // 设置球形贴图，否则，环境贴图就像一个背景图片似的
  // envMap.mapping = THREE.EquirectangularReflectionMapping // 反射
  envMap.mapping = THREE.EquirectangularRefractionMapping // 折射（核心-1）
  // 给场景添加环境贴图
  scence.background = envMap
  scence.environment = envMap
})

let thicknessMap = new THREE.TextureLoader().load('../public/assets/texture/diamond/diamond_emissive.png')
// 创建立方体
const geomary = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshPhysicalMaterial({
  transparent: true, // 透明
  transmission: 0.95, // 材质的透光率，范围：0（不透明）~ 1（透明）
  roughness: 0.1, // 材质的粗糙度，范围：0（光滑）~ 1（粗糙），粗糙程度，影响材质的反射光泽度

  // 衰减颜色：白光在达到衰减距离时由于吸收而变成的颜色；默认值为白色
  attenuationColor: new THREE.Color(0.9, 0.9, 0),
  // 衰减距离：光在与粒子相互作用之前，在介质中传播的平均距离。该值以世界空间单位给出，并且必须大于零；默认值为“无限”；
  attenuationDistance: 1,

  thickness: 2 // 立方体的厚度
  // thicknessMap: thicknessMap, // 厚度纹理图
})
const cube = new THREE.Mesh(geomary, material)
scence.add(cube)

const gui = new GUI()
gui.add(cube.material, 'attenuationDistance', 0, 10).name('衰减距离')
gui.add(cube.material, 'thickness', 0, 2).name('厚度')
gui.add(cube.material, 'ior', 0, 2).name('折射率')
gui.add(cube.material, 'reflectivity', 0, 1).name('反射率')