Three.js 光源

提示词

PROMPT
1
使用 Three.js 的 DirectionalLight 创建平行光，展示光源对材质的影响。

效果描述

这是一个展示如何使用光源的示例，包括平行光的创建和光源辅助线的显示。

效果特性

  • 平行光：使用 DirectionalLight 创建平行光
  • 光源辅助：使用 DirectionalLightHelper 显示光源辅助线
  • 材质影响：展示光源对不同材质的影响
  • 光源位置：设置光源位置和方向
  • 光源强度：调整光源强度
  • 光源颜色：设置光源颜色

核心参数

参数 值 说明
光源类型 DirectionalLight 平行光
光源颜色 0xff00ff 紫色
光源强度 1.0 光源强度
光源位置 (100, 0, 200) 光源位置
辅助线大小 5 辅助线大小
辅助线颜色 0xff0000 红色

核心代码解析

创建光源

JAVASCRIPT
1
2
3
const directionalLight = new THREE.DirectionalLight(0xff00ff, 1.0); // 颜色、强度
directionalLight.position.set(100, 0, 200); // 位置
scene.add(directionalLight);

创建光源辅助

JAVASCRIPT
1
2
3
4
5
6
const dirLightHelper = new THREE.DirectionalLightHelper(
    directionalLight,
    5,
    0xff0000
);
scene.add(dirLightHelper);

创建物体

JAVASCRIPT
1
2
3
4
5
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial();
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 10, 0);
scene.add(mesh);

技术亮点

  1. DirectionalLight：创建平行光效果
  2. DirectionalLightHelper：显示光源辅助线
  3. MeshLambertMaterial：使用受光源影响的材质
  4. 光源位置：设置光源位置和方向
  5. 光源参数：调整光源颜色和强度

调试技巧

  1. 光源位置：调整光源位置改变光照方向
  2. 光源强度：调整 intensity 控制光照强度
  3. 光源颜色：调整 color 控制光照颜色
  4. 辅助线：使用辅助线查看光源方向
  5. 材质选择：选择合适的材质类型

扩展方向

  1. 多种光源：添加点光源、聚光灯等
  2. 光源动画：动画光源位置和强度
  3. 阴影效果：添加阴影效果
  4. 光源控制：使用 GUI 控制光源参数
  5. 光源混合：混合多种光源效果

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。