效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0708f16c22a145de9f1375ed7d16597a.png)
代码
import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.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 glftLoader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath("./draco/")
glftLoader.setDRACOLoader(dracoLoader)
glftLoader.load("./model/city.glb", (gltf) => {
console.log(gltf, 'gltf记载器的回调参数');
scene.add(gltf.scene)
})
let rgbeloader = new RGBELoader()
rgbeloader.load('./texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {
envMap.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = envMap
})
scene.background = new THREE.Color(0x999999)
scene.fog = new THREE.Fog(0x999999,0.1)
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()