13.THREE.HemisphereLight 全面详解(含 Vue Composition 示例)

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

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


🌟 一、基础介绍

✅ 定义

javascript 复制代码
THREE.HemisphereLight(skyColor: Color | string | number, groundColor: Color | string | number, intensity: number)
  • skyColor:来自上方的光颜色(通常是天空色)

  • groundColor:来自下方的光颜色(通常是地面色)

  • intensity:光照强度(默认值为 1)


🧠 二、特点总结

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

🛠️ 三、完整代码示例(原生 Three.js)

javascript 复制代码
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. 安装依赖

javascript 复制代码
npm install three

✅ 2. Vue 组件示例(HemisphereLightView.vue

javascript 复制代码
<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 的实战内容!

相关推荐
坐吃山猪4 小时前
SpringBoot01-配置文件
java·开发语言
晚风(●•σ )4 小时前
C++语言程序设计——06 字符串
开发语言·c++
我叫汪枫4 小时前
《Java餐厅的待客之道:BIO, NIO, AIO三种服务模式的进化》
java·开发语言·nio
Nicole-----4 小时前
Python - Union联合类型注解
开发语言·python
晚云与城5 小时前
今日分享:C++ -- list 容器
开发语言·c++
兰雪簪轩5 小时前
分布式通信平台测试报告
开发语言·网络·c++·网络协议·测试报告
蓝桉8025 小时前
如何进行神经网络的模型训练(视频代码中的知识点记录)
人工智能·深度学习·神经网络
FPGAI6 小时前
Qt编程之信号与槽
开发语言·qt
星期天要睡觉6 小时前
深度学习——数据增强(Data Augmentation)
人工智能·深度学习
Swift社区6 小时前
从 JDK 1.8 切换到 JDK 21 时遇到 NoProviderFoundException 该如何解决?
java·开发语言