Three.js 基础

//导入threejs
import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.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);//将渲染器的dom元素添加到页面中

1.2 坐标辅助器 + 轨道控制器

坐标轴帮助我们看懂 3D 空间方向，轨道控制器实现鼠标拖拽、缩放、平移视角

//添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
//设置带阻尼的惯性
controls.enableDamping = true
//设置阻尼系数
controls.dampingFactor = 0.05
//设置自动旋转
// controls.autoRotate = true

二、3D 物体三大变换：位移、缩放、旋转

所有网格模型（Mesh）都具备 position、scale、rotation 三大属性，是动画和交互的基础。

2.1 位移 position

// 单独设置
cube.position.x = 2
cube.position.y = 1
cube.position.z = -1

// 批量设置
cube.position.set(2,1,-1)

2.2 缩放 scale

cube.scale.set(1.5, 0.5, 1)

2.3 旋转 rotation

cube.rotation.x = Math.PI / 4
cube.rotation.y = Math.PI / 2

三、父子层级系统

Three.js 支持父子嵌套：父物体移动/旋转/缩放，子物体会跟随变化

// 父物体 地球
const earth = new THREE.Mesh(...)
scene.add(earth)

// 子物体 月亮
const moon = new THREE.Mesh(...)
moon.position.x = 2
earth.add(moon) // 月亮挂载到地球

子物体坐标是相对父物体局部坐标，不是世界坐标。

四、响应式画布 + 全屏适配

默认画布不会跟随窗口变化，会导致拉伸变形，必须手动适配。

// 窗口自适应
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

// F键全屏切换
window.addEventListener('keydown', (e) => {
  if(e.key === 'f') {
    if(!document.fullscreenElement) renderer.domElement.requestFullscreen()
    else document.exitFullscreen()
  }
})

五、lil-GUI 实时调试工具

实时调节位置、颜色、旋转、参数

import { GUI } from 'lil-gui'
const gui = new GUI()

// 位置控制
gui.add(cube.position, 'x', -5, 5)
gui.add(cube.position, 'y', -5, 5)

// 颜色控制
gui.addColor(cube.material, 'color')

// 开关控制
gui.add(cube.material, 'wireframe')

六、几何体底层原理

所有内置几何体底层都是 BufferGeometry，由顶点、索引、三角形面组成。
顶点：3D 空间坐标点 (x,y,z)
三角形面：3 个顶点组成一个最小渲染面
索引：复用顶点，节省内存

手动自定义几何体示例

const vertices = new Float32Array([
  0,1,0,
  -1,-1,0,
  1,-1,0
])
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.BufferAttribute(vertices,3))

七、Three.js 常用内置几何体

new THREE.BoxGeometry() // 立方体
new THREE.SphereGeometry() // 球体
new THREE.CylinderGeometry() // 圆柱
new THREE.ConeGeometry() // 圆锥
new THREE.TorusGeometry() // 圆环
new THREE.PlaneGeometry() // 平面

八、材质系统：颜色、光照、高光、透明、金属度

8.1 基础材质（不受光照）

new THREE.MeshBasicMaterial({
  color:0xffffff,
  wireframe:false,
  transparent:true,
  opacity:0.5
})

8.2 物理材质（支持光照、金属、粗糙度）

new THREE.MeshStandardMaterial({
  metalness:0.8, // 金属度
  roughness:0.2, // 粗糙度
  transparent:true,
  opacity:0.9
})

九、贴图

作用：定义物体表面的基础颜色和图案，相当于给模型 “穿上皮肤”，是最基础的贴图。

9.1高光贴图

作用：控制物体表面不同区域的高光强度，决定哪里反光强、哪里反光弱。
原理：贴图的亮度值控制高光强度：
白色区域：高光最强，反光明显（比如金属边缘、光滑的漆面）
黑色区域：高光最弱，几乎不反光（比如粗糙的布料、污垢区域）
效果：让物体的反光更有层次，比如一个金属球，边缘高光强，磨损的划痕处高光弱，更真实

const specularMap = textureLoader.load('textures/specular.jpg');
const material = new THREE.MeshPhongMaterial({
  map: colorMap,
  specularMap: specularMap, // 高光贴图
  specular: new THREE.Color(0xffffff) // 高光基础颜色
});

9.2透明贴图

作用：控制物体表面不同区域的透明度，实现镂空、半透明效果。
原理：贴图的亮度值控制透明度：
白色区域：完全不透明
黑色区域：完全透明
灰色区域：半透明

const alphaMap = textureLoader.load('textures/leaf_alpha.jpg');
const material = new THREE.MeshStandardMaterial({
  map: colorMap,
  alphaMap: alphaMap, // 透明贴图
  transparent: true, // 必须开启透明模式
  opacity: 1 // 透明贴图生效时，基础opacity也会叠加影响
});

9.3环境贴图

作用：模拟物体反射周围环境的效果，实现金属、玻璃等物体的反射质感。
原理：将一张全景环境贴图（通常是立方体贴图或 HDRI）映射到物体表面，模拟物体对环境的反射。

9.4环境光遮蔽贴图

作用：模拟物体缝隙、褶皱处的环境光遮蔽效果，增强模型的立体感和细节。
原理：贴图的亮度值控制遮蔽强度：
白色区域：完全不遮蔽，正常受光
黑色区域：完全遮蔽，光线难以到达，颜色偏暗（比如物体的缝隙、褶皱、凹陷处）

const aoMap = textureLoader.load('textures/ao.jpg');
const material = new THREE.MeshStandardMaterial({
  map: colorMap,
  aoMap: aoMap, // 环境光遮蔽贴图
  aoMapIntensity: 1.0 // 遮蔽强度，值越大，缝隙处越暗
});

十、场景雾效

10.1线性雾

new Fog( color : number | Color, near : number, far : number )

color:雾的颜色。

near:开始喷洒雾剂的最小距离。

far:雾效停止计算和应用的最大距离。

10.2指数雾

new FogExp2( color : number | Color, density : number )

color：雾的颜色。

density：决定雾气浓化的速度。

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

用 AI 提升微服务部署效率：Sourcelin Blog 实战经验分享

本文分享了如何利用 AI 辅助微服务项目部署排障的实战经验。以 Sourcelin Blog 开源项目为例，重点介绍了如何通过结构化提问让 AI 按依赖顺序排查问题、如何利用现有部署基线（Docker Compose、环境配置）提高效率，以及部署前关键检查点。文章强调 AI 在部署阶段的价值不是替代人工，而是帮助快速缩小问题范围，特别适合网关、认证、系统、博客等多层微服务架构的排障场景。部署阶段其