详细说说Three.js三维坐标系和光源对物体表面影响

坐标系规则（右手坐标系）

three.js遵循右手笛卡尔坐标系

• X 轴 ：水平 向右 为正
• Y 轴 ：垂直 向上 为正
• Z 轴 ：向外（朝向屏幕你） 为正，向里（远离你） 为负

位置控制（position）

所有模型，相机，灯光都有position

obj.position.x = 1;
obj.position.y = 2;
obj.position.z = 3;

// 简写
obj.position.set(1, 2, 3);

旋转控制

// 绕 X / Y / Z 轴旋转
obj.rotation.x = Math.PI / 4;
obj.rotation.set(Math.PI/4, Math.PI/2, 0);

缩放（scale）

obj.scale.set(1.5, 1.5, 1.5);

辅助坐标系

直接在场景画出 X/Y/Z 三色轴：

• 红色：X
• 绿色：Y
• 蓝色：Z

// 长度 5
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

材质与光源基础关系

两种材质的本质区别

MeshBasicMaterial ：不受任何光源影响，永远纯色，无阴暗，无阴影，适合文字，UI，不需要光影的物体；

MeshLambertMaterial / MeshPhongMaterial / MeshStandardMaterial ：必须有光源 才会显示明暗、立体感，靠法线 + 光线角度 计算表面亮度，大屏、模型、实景渲染必用

光源影响物体表面的原理

物体每个面都有法线（垂直表面的方向）

• 光线正对着表面 → 最亮
• 光线斜着照 → 变暗
• 光线背面 → 全黑
• 多光源叠加 = 混合亮度

Three.js 五大常用光源 详细作用

1.环境光AmbientLight

漫反射全局光，

• 无方向、无阴影
• 给整个场景打底亮度，不会死黑
• 不能单独用，物体没立体感

const ambient = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambient);

2. 平行光 DirectionalLight

模拟太阳光

• 光线平行、有方向
• 可以产生阴影
• 适合整体日照、大屏地图打光

const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 7);
// 开启阴影
dirLight.castShadow = true;
scene.add(dirLight);

3. 点光源 PointLight

模拟灯泡、路灯

• 向四面八方发散
• 距离越远越暗
• 可产生阴影

const pointLight = new THREE.PointLight(0xffaa00, 1, 20);
pointLight.position.set(0, 3, 0);
scene.add(pointLight);

4. 聚光灯 SpotLight

模拟手电筒、舞台射灯

• 锥形照射范围
• 有聚焦、有边缘衰减

const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(0, 5, 0);
scene.add(spotLight);

5. 半球光 HemisphereLight

模拟天空 + 地面环境渐变

• 上方天光、下方地面反光
• 柔和自然，无阴影

const hemiLight = new THREE.HemisphereLight(0x87ceeb, 0x333333, 0.6);
scene.add(hemiLight);

光源阴影必备配置

想要物体有投影、地面有影子，必须开：

// 渲染器开启阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 柔和阴影

// 灯光开启投射阴影
dirLight.castShadow = true;

// 模型允许投射阴影
cube.castShadow = true;

// 地面接收阴影
plane.receiveShadow = true;