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 的实战内容!

相关推荐
Stevetagelian2 小时前
vue2实现元素拖拽
前端·javascript·css·vue.js
西哥写代码2 小时前
基于cornerstone3D的dicom影像浏览器 第二十一章 显示DICOM TAGS
前端·javascript·vue
Micro麦可乐3 小时前
前端图片裁剪上传全流程详解:从预览到上传的完整流程
前端·javascript·图片上传·图片裁切·cropper.js
Am1nnn3 小时前
CICD编译时遇到npm error code EINTEGRITY的问题
前端·npm·node.js
..过云雨4 小时前
01. Qt介绍及Qt开发环境搭建(2025.05最新官网下载方式)
开发语言·qt
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ4 小时前
crud方法命名示例
java·开发语言
测试工程喵5 小时前
如何测试JWT的安全性:全面防御JSON Web Token的安全漏洞
前端·网络·功能测试·安全·json·接口测试·token
瓦力wow5 小时前
python 绘制3D平面图
开发语言·python·3d·matplotlib
Python私教6 小时前
PrimeVue菜单组件深度解析:构建高效能的Web导航系统
前端·javascript·vue.js
kailp6 小时前
云渲染技术解析与渲酷平台深度测评:如何实现高效3D创作?
人工智能·深度学习·3d·渲染·gpu算力