效果

代码实现

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'//相机轨道控制器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js"//加载hdr文件作为环境贴图
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'


//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓创建场景
const scene = new THREE.Scene()
// 在场景中添加坐标辅助器
const axesHelper = new THREE.AxesHelper(10)//数据表示坐标轴的长度
scene.add(axesHelper)//将坐标轴添加到场景中
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑创建场景


//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓创建透视相机
const camera = new THREE.PerspectiveCamera(
    45,//视角,可视范围
    window.innerWidth / window.innerHeight,//摄像机的宽高比
    0.1,//摄像机最近能看到的距离
    1000//摄像机最远能看到的距离
)
// 设置相机的位置
camera.position.x = 8
camera.position.y = 8
camera.position.z = 8
camera.lookAt(0, 0, 0)//摄像机的朝向
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑创建透视相机


//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)//渲染器的尺寸大小
document.body.appendChild(renderer.domElement)//renderer.domElement就是canvas元素
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑创建渲染器


//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓添加轨道控制器
// 添加相机轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true //打开惯性阻尼
controls.dampingFactor = 0.05//阻尼系数
controls.autoRotate = false//是否自动旋转(围绕着lookAt的坐标旋转)
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑添加轨道控制器


// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓添加材质贴图开始
const plan = new THREE.PlaneGeometry(5, 5)//创建一个平面
let textureLoader = new THREE.TextureLoader()//纹理加载器
// 此处默认加载的是public目录下的文件,如果要加载src下的文件,需要使用require()的形式
let texture = textureLoader.load('./.....xxx.png')//加载纹理贴图
texture.colorSpace = THREE.SRGBColorSpace//添加颜色深度
// texture.colorSpace = THREE.LinearSRGBColorSpace//线性颜色
// texture.colorSpace = THREE.NoColorSpace//无颜色深度

let aoMap = textureLoader.load('./.....xxx.png')//加载oa贴图(环境遮挡贴图),让夹缝之间的图更加真实
let alphaMap = textureLoader.load('./.....xxx.png')//加载透明度贴图,黑色全透明,白色完全不透明
let lightMap = textureLoader.load('././.....xxx.png')//加载光照贴图,模拟环境光的颜色
let specularMap = textureLoader.load('././.....xxx.png')//加载高光贴图,黑色不反射,白色反射环境光
let rgbeloader = new RGBELoader()//加载hdr文件作为环境贴图
rgbeloader.load('././.....xxx.hdr', (envMap) => {
    envMap.mapping = THREE.EquirectangularReflectionMapping;//设置球形贴图
    scene.background = envMap //设置背景的环境贴图
    scene.environment = envMap //设置场景的环境贴图
    material.envMap = envMap //设置平面的环境贴图
})
const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color('gray'),
    side: THREE.DoubleSide,
    map: texture,//纹理贴图
    aoMap,//环境遮挡贴图
    // alphaMap,//透明度贴图
    aoMapIntensity: 1,
    // lightMap,//光照贴图
    transparent: true,//纹理透明是否开启
    specularMap,//高光贴图
    reflectivity: 0.5//高光贴图反射区的反射程度
})

const cube = new THREE.Mesh(plan, material)
scene.add(cube)

let gui = new GUI()
gui.add(material, 'aoMapIntensity').min(0).max(1).name('oa贴图')
gui.add(material, 'reflectivity').min(0).max(1).name('高光贴图反光部分反光度')
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑添加材质贴图结束


//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓渲染
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight//重置相机的宽高比
    camera.updateProjectionMatrix()//更新相机的投影矩阵
    renderer.setSize(window.innerWidth, window.innerHeight)//重置渲染器的宽高比
})

function animate() {
    controls.update()
    renderer.render(scene, camera)//渲染=相机+场景
    requestAnimationFrame(animate)//下一帧继续调用渲染函数
}
animate()
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑渲染