本篇主要学习内容 :

1. 纹理的颜色空间
2. 线型雾的使用
3. 指数雾的使用

点赞 + 关注 + 收藏 = 学会了

1.纹理的颜色空间

1.1） 纹理属性 色彩空间 调色差问题 (按发射光强度均匀分布灰度条)

texture.colorSpace = THREE.SRGBColorSpace

1.2) 线性 默认 (在感知光强度均匀分布灰度条)

texture.colorSpace = THREE.LinearSRGBColorSpace

1.3) 不设置颜色空间 按照原有渲染

THREE.NoColorSpace

2. 雾

2.1)线型雾的使用

此类包含定义线性雾的参数，即，线性雾随距离的增加而线性增加。 fog（ color ： 整数， near ： 浮点， far ： 浮点 ）

scene.fog = new THREE.Fog(‘#dddddd’, 0.5, 50) //颜色，浓度，距离多少米

2.2)指数雾的使用

此类包含定义指数平方雾的参数，该雾在摄像机附近提供清晰的视图，并在远离摄像机的地方提供比指数增密更快的雾。
FogExp2（ color ： 整数， density ： 浮点型 ）

scene.fog = new THREE.FogExp2(‘#dddddd’, 0.1)//颜色，指数

2.3）实际应用

雾的使用完整代码

import {
    
     onMounted } from 'vue'
// 导入threejs
import * as THREE from 'three'

import {
    
     OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 导入lil.gui
import {
    
     GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入hdr加载器
import {
    
     RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角
    window.innerWidth / window.innerHeight, //宽高比
    0.1, //近平面
    1000 //远平面
)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 设置相机位置
camera.position.x = 5
camera.position.y = 2
camera.position.z = 5
camera.lookAt(3, 0, 0) //原点
// 坐标辅助器 （xyz轴绘制）
const axesHelper = new THREE.AxesHelper(5)

scene.add(axesHelper)
// 轨道控制器  (旋转缩放)
const controls = new OrbitControls(camera, renderer.domElement)
// const controls = new OrbitControls(camera, document.body)
// 设置带阻尼（惯性缓动效果）
controls.enableDamping = true
// 阻尼系数
controls.dampingFactor = 0.05
// 旋转速度
// controls.autoRotate = true
// 渲染函数
;(function animate() {
    
    
    controls.update()
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
})()
// 渲染
// 监听窗口变化
window.addEventListener('resize', () => {
    
    
    // 重置渲染器宽高比
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 重置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    // 更新相机投影矩阵
    camera.updateProjectionMatrix()
})

const gui = new GUI()

// 创建长方体
const boxGeometry = new THREE.BoxGeometry(1, 1, 100)
const material = new THREE.MeshBasicMaterial({
    
    
    color: 0x00ff00,
})
let box = new THREE.Mesh(boxGeometry, material)
scene.add(box)
//创建场景雾 线性fog
scene.fog = new THREE.Fog('#dddddd', 0.5, 50) //颜色，浓度，距离多少米
//创建场景雾 指数fog
// scene.fog = new THREE.FogExp2('#dddddd', 0.1)
scene.background = new THREE.Color('#dddddd')

感谢：b站up主：老陈打码 以及 threejs中文网 教学及参考文档
到此基础入门（六）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️