three.js 如何简单的实现场景的雾

https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=basic&id=sceneFog
在这里插入图片描述

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'const box = document.getElementById('box')const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 100000)camera.position.set(0, 20, 60)const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = trueanimate()function animate() {requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}scene.add(new THREE.AmbientLight(0xffffff, 1))const directionalLight = new THREE.DirectionalLight(0xffffff, 1)directionalLight.position.set(0, 100, 0)scene.add(directionalLight)window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect = box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}new GLTFLoader().load('https://file.threehub.cn/files/model/Fox.glb', (gltf) => {gltf.scene.position.set(0, 0, -500)scene.add(gltf.scene)})new GLTFLoader().load('https://file.threehub.cn/models/glb/foorGround.glb', (gltf) => {const model = gltf.scenemodel.position.z += 60model.position.x -= 200model.scale.set(10, 10, 10)scene.add(model)})function getFog(type, color) {renderer.setClearColor(color || 0xffffff)if (type === 'linear') return new THREE.Fog(color || 0xffffff, 10, 800)else return new THREE.FogExp2(color || 0xffffff, 0.005)}const folder = new GUI()let fogFolder = nullconst fogOption = { type: scene.fog instanceof THREE.FogExp2 ? 'exp2' : 'linear', enable: !!scene.fog }folder.add(fogOption, 'type', ['linear', 'exp2']).name('雾类型').onChange((v) => {scene.fog = getFog(v, scene.fog?.color)setFogFolder(v)})folder.add(fogOption, 'enable').name('启用雾').onChange((v) => {if (v) scene.fog = getFog(fogOption.type)else scene.fog = nullsetFogFolder(fogOption.type)})fogOption.enable && setFogFolder(fogOption.type)function setFogFolder(type) {if (fogFolder) {fogFolder.destroy?.()fogFolder = null}if (!scene.fog) returnfogFolder = folder.addFolder(type + '雾')fogFolder.addColor(scene.fog, 'color').name('颜色').onChange((v) => renderer.setClearColor(v))if (type === 'linear') {fogFolder.add(scene.fog, 'near').name('近点')fogFolder.add(scene.fog, 'far').name('远点')}else fogFolder.add(scene.fog, 'density').name('密度').min(0).max(0.1).step(0.00001)}/*** 名称: 场景雾化* 作者: 优雅永不过时 https://github.com/z2586300277
*/