3.js - MeshPhysicalMaterial - 虹彩效果

效果图

// @ts-nocheck

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'


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)

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()
  requestAnimationFrame(animate)
  renderer.render(scence, camera)
}
animate()


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


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
  scence.background = envMap
  scence.environment = envMap
})

let iridescenceThicknessMap = new THREE.TextureLoader().load('../public/assets/texture/brick/brick_diffuse.jpg')

// 创建球
const geometry = new THREE.SphereGeometry(1, 32, 32)
const material = new THREE.MeshPhysicalMaterial({
	color: 0xffffff,
	roughness: 0.05,
	
	`透明度`：范围：0~1(完全透明)，表示光线穿过物体的程度
	transmission: 1,
	
	reflectivity: 1, `反射`
	
	`厚度`：物体有了厚度，才会有折射效果
	thickness: 0.1,
	
	`虹彩效果`：范围：0~1，表示虹彩的强度（虹彩是一种颜色随观察角度变化而变化的效应）
	iridescence: 1,
	
	`虹彩折射率`：与虹彩效果`iridescence`一起使用，以定义虹彩的视觉效果
	iridescenceIOR: 1.3,
	
	`虹彩厚度范围`：这是一个数组，
					 定义，虹彩效果在物体内部或表面上的厚度范围。
	               在这个例子中，虹彩效果可能在物体的100到400单位厚度范围内最为明显。
	iridescenceThicknessRange: [100, 400],
	
	iridescenceThicknessMap: iridescenceThicknessMap
})

const sphere = new THREE.Mesh(geometry, material)
scence.add(sphere)

const gui = new GUI()
gui.add(material, 'iridescence', 0, 1).name('虹彩色')
// gui.add(material, 'reflectivity', 0, 1).name('反射率')
gui.add(material, 'iridescenceIOR', 0, 3).name('虹彩折射率')

let iridescenceThickness = {
  min: 100,
  max: 400
}

gui
  .add(iridescenceThickness, 'min', 0, 100)
  .name('虹彩色最小厚度')
  .onChange(() => {
    material.iridescenceThicknessRange[0] = iridescenceThickness.min
  })
  
gui
  .add(iridescenceThickness, 'max', 0, 1000)
  .name('虹彩的最大厚度')
  .onChange(() => {
    material.iridescenceThicknessRange[1] = iridescenceThickness.max
  })