效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2ed0305299cd49d7a5c32121de596386.png)
代码实现
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"
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)
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.dampingFactor = 0.05
controls.autoRotate = false
const plan = new THREE.PlaneGeometry(5, 5)
let textureLoader = new THREE.TextureLoader()
let texture = textureLoader.load('./.....xxx.png')
texture.colorSpace = THREE.SRGBColorSpace
let aoMap = textureLoader.load('./.....xxx.png')
let alphaMap = textureLoader.load('./.....xxx.png')
let lightMap = textureLoader.load('././.....xxx.png')
let specularMap = textureLoader.load('././.....xxx.png')
let rgbeloader = new RGBELoader()
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,
aoMapIntensity: 1,
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()