11. Three.js 中的 AmbientLight（环境光）详解

最新推荐文章于 2025-05-04 13:53:25 发布

吉檀迦俐

最新推荐文章于 2025-05-04 13:53:25 发布

阅读量950

点赞数 25

分类专栏： ThreeJS 文章标签： javascript 前端 vue.js 开发语言 ecmascript webgl

本文链接：https://blog.csdn.net/Miller777_/article/details/147605066

版权

ThreeJS 专栏收录该内容

13 篇文章

订阅专栏

本文适用于 Three.js 初学者与进阶开发者，深入了解 THREE.AmbientLight 的用法、原理和最佳实践，最后还会给出一个基于 Vue 3 Composition API 的真实代码案例。

🌟 什么是 AmbientLight（环境光）？

THREE.AmbientLight 是一种全局光源，它会均匀地照亮整个场景中的所有物体，没有方向性、不会产生阴影，是最基础也最常用的光源之一。

✅ 特点：

没有位置（无方向性）
不会产生阴影
整体照亮所有物体（不会突出立体感）
通常与其他光源（如 DirectionalLight、PointLight）配合使用

🧪 创建语法

const light = new THREE.AmbientLight(color, intensity); 
scene.add(light);

⚙️ 参数说明

参数	类型	说明
`color`	`Color` / `Number` / `String`	光的颜色，默认 `0xffffff`
`intensity`	`Number`	光照强度，默认 `1`，可设置为任意正数，`0` 为无光照

示例：

const ambient = new THREE.AmbientLight(0x404040); // 柔和白光 
scene.add(ambient);

🧠 使用技巧与建议

通常用来“提亮整体场景”
不建议单独使用（会导致模型显得“平面”）
常与 DirectionalLight 或 PointLight 搭配，提供基础光照

配合使用建议：

const ambient = new THREE.AmbientLight(0x404040, 1.5); 
const directional = new THREE.DirectionalLight(0xffffff, 0.8); 
scene.add(ambient, directional);

❗ 与其他光源的区别

光源类型	是否投影	是否有方向	用途
AmbientLight	❌	❌	提供基础全局照明
DirectionalLight	✅	✅	类似太阳光，有阴影
PointLight	✅	✅ (点发散)	类似灯泡，有范围和衰减
SpotLight	✅	✅ (锥形)	舞台聚光灯，照射区域可控

📸 效果对比图

你可以使用以下代码观察效果差异：

// 仅环境光 
scene.add(new THREE.AmbientLight(0xffffff, 1.2)); 
// 无光 
// scene 不添加任何光源

🧩 Vue 3 + Composition API 使用示例

我们用 Vue 3 + Three.js 搭建一个简单的场景，加入 AmbientLight。

📁 依赖准备（假设使用 Vite 构建）

npm install three

📄 示例代码：`AmbientLightScene.vue`

<template>
  <div ref="container" class="w-full h-full"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'

const container = ref(null)

onMounted(() => {
  const scene = new THREE.Scene()

  const camera = new THREE.PerspectiveCamera(
    75,
    container.value.clientWidth / container.value.clientHeight,
    0.1,
    1000
  )
  camera.position.z = 5

  const renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
  container.value.appendChild(renderer.domElement)

  // 添加几何体
  const geometry = new THREE.BoxGeometry()
  const material = new THREE.MeshStandardMaterial({ color: 0x007bff })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  // 添加 AmbientLight 环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 1.2)
  scene.add(ambientLight)

  // 添加 DirectionalLight 更有立体感
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
  directionalLight.position.set(5, 5, 5)
  scene.add(directionalLight)

  const animate = () => {
    requestAnimationFrame(animate)
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    renderer.render(scene, camera)
  }

  animate()
})
</script>

<style scoped>
div {
  width: 100%;
  height: 100vh;
  background: #000;
}
</style>