13.THREE.HemisphereLight 全面详解（含 Vue Composition 示例）

THREE.HemisphereLight 是 Three.js 中一种特殊的光源类型，模拟天空光和地面光的混合效果，常用于制作自然的室外场景照明。相比其他光源，HemisphereLight 没有位置、不会投射阴影，但在表现整体环境氛围时非常有效。

本文将详解其构造方式、常用属性、应用场景，并结合 Vue 3 Composition API 实现一个简单的使用案例。

---

🌟 一、基础介绍

✅ 定义

THREE.HemisphereLight(skyColor: Color | string | number, groundColor: Color | string | number, intensity: number)

• skyColor：来自上方的光颜色（通常是天空色）

• groundColor：来自下方的光颜色（通常是地面色）

• intensity：光照强度（默认值为 1）

---

🧠 二、特点总结

特性	说明
光源类型	环境光（Ambient）
是否有位置	❌（作用于整个场景）
是否投射阴影	❌（不可投影）
光源方向	来自"天空"向"地面"
使用场景	大气、自然光表现，室外、开放空间照明，漫反射氛围
可与其他光源叠加	✅（可配合 DirectionalLight、PointLight 使用）

---

🛠️ 三、完整代码示例（原生 Three.js）

import * as THREE from 'three'

const scene = new THREE.Scene()

const hemiLight = new THREE.HemisphereLight(0x87ceeb, 0x444444, 1)
scene.add(hemiLight)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 1, 5)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const geometry = new THREE.SphereGeometry(1, 32, 32)
const material = new THREE.MeshStandardMaterial({ color: 0xffffff })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

---

🧩 四、Vue 3 Composition API 示例

项目基于 Vite + Vue 3 + Three.js，推荐使用模块化封装。

✅ 1. 安装依赖

npm install three

✅ 2. Vue 组件示例（HemisphereLightView.vue）

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

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

const container = ref<HTMLElement | null>(null)

onMounted(() => {
  if (!container.value) return

  const scene = new THREE.Scene()
  scene.background = new THREE.Color(0xeeeeee)

  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)

  // 添加 HemisphereLight
  const hemiLight = new THREE.HemisphereLight(0x87ceeb, 0x444444, 1)
  scene.add(hemiLight)

  // 添加几何体
  const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    new THREE.MeshStandardMaterial({ color: 0xffffff })
  )
  scene.add(sphere)

  const animate = () => {
    requestAnimationFrame(animate)
    sphere.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()
})
</script>

<style scoped>
div {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

---

📐 五、常用属性参考

属性名	说明
.color	天空方向光的颜色
.groundColor	地面方向光的颜色
.intensity	强度，默认 1
.type	返回字符串 "HemisphereLight"
.isHemisphereLight	返回 true

---

🎨 六、视觉效果示意图

---

📅 七、后续光源系列文章预告

本文为 Three.js 光源系统专题系列文章之一，后续将会推出以下内容：

• 🔆 THREE.DirectionalLight（平行光，太阳光）

• 💡 THREE.PointLight（点光源）

• 🕯️ THREE.SpotLight（聚光灯）

• 💡 THREE.RectAreaLight（矩形光源）

• 🔦 THREE.LightProbe（光照探针）

• 🌫️ THREE.AmbientLight（环境光）

欢迎持续关注！每篇都会带来详细讲解、效果图和 Vue 示例。

---

🔚 总结

• HemisphereLight 非常适合用于自然环境氛围渲染。

• 不支持投影，但能有效提升整体漫反射亮度。

• 搭配 DirectionalLight 使用效果更佳。

• Vue 项目中可以使用 Composition API 封装灵活控制光源。

---

如果你觉得这篇文章对你有帮助，请点个赞 👍 或收藏 ⭐，后续会持续更新更多 Three.js + Vue3 的实战内容！