场景（Scene）：所有3D对象的容器

相机（Camera）：决定可见范围与视角（常用透视相机）

渲染器（Renderer）：把3D场景渲染到屏幕

1) 创建场景：

const scene = new THREE.Scene();

2) 创建相机：

const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);

3) 创建渲染器并设置尺寸：

const renderer = new THREE.WebGLRenderer();

renderer.setSize(width, height);

4) 创建几何体与材质并组合网格：

const geometry = new THREE.BoxGeometry(1, 1, 1);

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

5) 设置相机位置并渲染：

camera.position.z = 5;

renderer.render(scene, camera)

使用 markRaw(obj) 可将对象标记为非响应式，减少性能消耗与不必要的警告/报错

width：宽度（X）

height：高度（Y）

depth：深度（Z）

radius：半径

widthSegments：水平分段数（越大越圆滑）

heightSegments：垂直分段数（越大越圆滑）

平面：width、height、widthSegments、heightSegments

圆柱体：radiusTop、radiusBottom、height、radialSegments

圆环体：radius（环半径）、tube（管半径）、radialSegments、tubularSegments

基础：MeshBasicMaterial（不受光照影响）

漫反射：MeshLambertMaterial（基础光照）

镜面反射：MeshPhongMaterial（高光、镜面）

物理：MeshStandardMaterial（金属度/粗糙度，PBR）

color：颜色

roughness：粗糙度(0-1)

metalness：金属度(0-1)

emissive：自发光颜色/强度

wireframe：是否线框

opacity/transparent：透明度与透明开关

环境光 AmbientLight：均匀照亮，不产生阴影

方向光 DirectionalLight：类似太阳光，可产生阴影

点光源 PointLight：像灯泡，支持范围与强度

阴影质量可通过 shadow.mapSize.width/height 调整（大更清晰，耗性能）

位置：object.position.set(x,y,z)

缩放：object.scale.set(x,y,z)

自转：object.rotation.y += 0.01

1) 监听画布事件：renderer.domElement.addEventListener('click', handler)

2) 使用 Raycaster：

raycaster.setFromCamera(mouse, camera)

const intersects = raycaster.intersectObjects([cube, sphere])

3) 取首个相交对象并处理：

const obj = intersects[0].object

obj.material.color.setHex(Math.random() * 0xffffff)

enableRotate/Zoom/Pan：是否允许旋转/缩放/平移

autoRotate：是否自动旋转

rotateSpeed/zoomSpeed：旋转/缩放速度

minDistance/maxDistance：距离限制

minPolarAngle/maxPolarAngle：仰角范围限制

OrbitControls：轨道控制（最常用）

FlyControls：飞行控制

FirstPersonControls：第一人称

PointerLockControls：鼠标锁定控制（需点击锁定）

思路：

1) 记录起始位置与目标位置

2) 使用时间插值与缓动（如 ease-out）持续更新 camera.position

3) 使用 requestAnimationFrame 逐帧更新

4) 环绕：基于角度生成圆周轨迹，更新相机 x/z，并适当调整 y 与 lookAt(0,0,0)

跨域图片：img.crossOrigin = "anonymous"

onload创建纹理：const tex = new THREE.Texture(img); tex.needsUpdate = true

应用到材质：mesh.material.map = tex

同时可记录纹理尺寸 img.width × img.height 便于信息展示