效果图
// @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
})
// -------------------- 布料、针织物的光泽效果 --------------------
const sheenColorMap = 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: 0x222288,
/*
1、`sheen`:材质的光泽度,范围:0~1(0:没有光泽,1:最大光泽度)
2、`sheenColor`:光泽层的颜色
另:`sheen、sheenColor`这俩一起用才有效果
*/
sheen: 1,
sheenColor: 0xffffff,
// 材质的粗糙度,范围从0(光滑)到1(粗糙)【粗糙度影响材质的反射光泽度(反射率reflectivity)】
roughness: 0,
sheenRoughness: 1, // 光泽层粗糙度,范围:0~1(0:没有光泽,1:最大光泽度)
sheenColorMap: sheenColorMap, // 光泽层纹理贴贴图
})
const sphere = new THREE.Mesh(geometry, material)
scence.add(sphere)