threeJS-网格的基础材料

第一步： 导入对应的工具并将基本布局完成

导入对应的工具

// 引入three.js
import * as THREE from 'three';
// 引入轨道控制器
import { OrbitControls } from 'three/addons/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(
 75, // 视角 --- 在同距离情况下，视角越大（宽），看到的东西越多
 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.z = 5
camera.position.y = 2
camera.position.x = 2
camera.lookAt(0,0,0); 

// 添加世界坐标辅助器 --- 绿y，红x，蓝z
const axesHelper = new THREE.AxesHelper( 5 );
scene.add(axesHelper)

// 添加轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );
// 设置带阻尼的惯性
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

监听窗口并渲染函数

// 渲染函数
const animate = () => {
  controls.update()
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scene, camera)
}

animate()

// 监听窗口变化
window.addEventListener("resize", () => {
  // 重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机投影矩阵
  camera.updateProjectionMatrix()
})

第二步： 创建GUI和加载器并引入对应的资源 + 色彩空间

// 创建属性参数管理器
const gui = new GUI()
// 创建纹理加载器
let textureLoader = new THREE.TextureLoader()
// 加载hdr加载器
let rgbLoader = new RGBELoader()

// 设置彩色空间（没设置前是线性的，设置后为sRGB与人眼的感知相匹配）
textureLoader.colorSpace = THREE.SRGBColorSpace

// 加载纹理 -- 原图
let texture = textureLoader.load("../../public/texture/Tiles118_1K-PNG/Tiles118.png")
// 加载ao贴图（环境遮挡贴图）-- 原图，但有阴影
let aoMap = textureLoader.load("../../public/texture/Tiles124_1K-PNG/Tiles124.png")
// 透明度贴图 ---- 黑白灰的图片
let alphaMap = textureLoader.load("../../public/texture/alpha.jpg")
// 加载光照贴图  -- 可以找测试用的图（颜色多且鲜明）
let lightMap = textureLoader.load("../../public/texture/lightMAp.png")
// 高光贴图（黑色不反射，白色反射，之间的微反）-- 原图，但黑白灰三色，区分哪里高光
let specularMap = textureLoader.load("../../public/texture/Tiles118_1K-PNG/Tiles118_1K-PNG_AmbientOcclusion.png")
// 加载hdr全景图 --- 找个网站区下载
rgbLoader.load("../../public/texture/brown_photostudio_02_1k.hdr", (envMap) => {
  // 设置球型的映射
  envMap.mapping = THREE.EquirectangularReflectionMapping;
  // 设置环境贴图
  scene.background = envMap
  // 设置整个场景的环境贴图
  planeMaterial.envMap = envMap
})

第三步： 创建一个平面和材质

// 创建一个平面
let planeGeometry = new THREE.PlaneGeometry(1,1)
// 创建材质
let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  map: texture, // 纹理贴图
  transparent: true, // 设置透明度
  aoMap: aoMap, // 设置阴影（环境遮罩）
  // alphaMap: alphaMap, // 设置透明度
  // lightMap: lightMap, // 设置光照贴图
  // reflectivity: 0.1, // 设置反射率的强度，默认1
  specularMap:specularMap, // 设置高光贴图
})
let plane = new THREE.Mesh(planeGeometry, planeMaterial)
// 添加到场景
scene.add(plane)
gui.add(planeMaterial, "aoMapIntensity").min(0).max(1).name("阴影")
gui.add(texture, "colorSpace", {
  sRGB: THREE.SRGBColorSpace,
  Linear: THREE.LinearSRGBColorSpace
}).onChange(() => {
  textureLoader.needUpdate = true
}).name("色彩空间")