当前位置： 首页 > article >正文

学习threejs，使用HemisphereLight半球光

article 2026/4/23 11:33:02

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.HemisphereLight
  • 二、🍀使用HemisphereLight半球光
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用HemisphereLight半球光，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.HemisphereLight

THREE.HemisphereLight 半球光，颜色是从天空到地面两个颜色之间的渐变，与物体材质的颜色作叠加后得到最终的颜色效果。一个点受到的光照颜色是由所在平面的朝向（法向量）决定的 —— 面向正上方就受到天空的光照颜色，面向正下方就受到地面的光照颜色，其他角度则是两个颜色渐变区间的颜色。
半球光不能投射阴影。

构造函数：
THREE.HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

  • skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。
  • groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。
  • intensity - (可选参数) 光照强度。 缺省值 1。

创建一个半球光。

属性：

.color : Color
光源的颜色。如果构造的时候没有传递，默认会创建一个新的 Color 并设置为白色。

.intensity : Float
光照的强度，或者说能量。 在 physically correct 模式下, color 和强度 的乘积被解析为以坎德拉（candela）为单位的发光强度。 默认值 - 1.0

.isLight : Boolean
只读标志，用于检查给定对象是否为 Light 类型。

.castShadow : Boolean
该参数在构造时被设置为 undefined 因为半球光不能投射阴影。

.groundColor : Float
在构造时传递的地面发出光线的颜色。 默认会创建 Color 并设置为白色（0xffffff）。

.isHemisphereLight : Boolean
只读标志，用于检查给定对象是否为 HemisphereLight 类型。

.position : Vector3
假如这个值设置等于 Object3D.DefaultUp (0, 1, 0),那么光线将会从上往下照射。

方法：
.copy ( source : HemisphereLight ) : this
从source复制 color, intensity 和 groundColor 的值到当前半球光对象中。

.toJSON ( meta : Object ) : Object
以JSON格式返回光数据。

meta – 包含有元数据的对象，例如该对象的材质、纹理或图片。 将该light对象转换为 three.js JSON Object/Scene format（three.js JSON 物体/场景格式）。

二、🍀使用HemisphereLight半球光

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene，设置场景Fog云雾效果
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、创建THREE.HemisphereLight半球光光源hemiLight，设置环境光hemiLight位置信息，scene场景加入环境光源hemiLight。创建THREE.SpotLight聚光灯光源spotLight0，设置光源位置和方向，scene场景加入spotLight0。创建THREE.DirectionalLight平行光源dirLight，设置平行光源位置、投影信息、方向，scene添加平行光源dirLight。
  • 5、加载几何模型：创建二维平面网格对象plane，plane使用‘grasslight-big.jpg’草地贴图，设置plane的旋转角度，scene场景加入plane。创建立方体网格对象cube，设置cube的位置和投影，scene场景加入cube。创建球体网格对象sphere，设置sphere的位置和投影，scene场景加入sphere。定义render方法，实现立方体cube旋转，球体sphere跳动的方法。具体代码参考下面代码样例。
  • 6、加入gui控件，控制半球光hemiLight的天空颜色、地面颜色、光强等信息。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>学习threejs，使用HemisphereLight半球光</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- js 代码 -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景并设置场景云雾var scene = new THREE.Scene();scene.fog = new THREE.Fog(0xaaaaaa, 0.010, 200);// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器并设置大小var renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;// 创建二维草地平面var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");textureGrass.wrapS = THREE.RepeatWrapping;textureGrass.wrapT = THREE.RepeatWrapping;textureGrass.repeat.set(4, 4);var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});
//        var planeMaterial = new THREE.MeshLambertMaterial();var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.receiveShadow = true;// 设置草地旋转角度和位置plane.rotation.x = -0.5 * Math.PI;plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 三维场景添加草地scene.add(plane);// 创建立方体var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3333});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.castShadow = true;// 设置立方体位置cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;// 三维场景加入立方体scene.add(cube);// 创建球体var sphereGeometry = new THREE.SphereGeometry(4, 25, 25);var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// 设置球体位置和投影sphere.position.x = 10;sphere.position.y = 5;sphere.position.z = 10;sphere.castShadow = true;// 三维场景添加球体scene.add(sphere);// 设置相机位置和角度camera.position.x = -20;camera.position.y = 15;camera.position.z = 45;
//        camera.position.x = -120;
//        camera.position.y = 165;
//        camera.position.z = 145;camera.lookAt(new THREE.Vector3(10, 0, 0));// 添加聚光灯光源，设置聚光灯光源位置和方向var spotLight0 = new THREE.SpotLight(0xcccccc);spotLight0.position.set(-40, 60, -10);spotLight0.lookAt(plane);scene.add(spotLight0);var target = new THREE.Object3D();target.position = new THREE.Vector3(5, 0, 0);var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);hemiLight.position.set(0, 500, 0);scene.add(hemiLight);var pointColor = "#ffffff";
//    var dirLight = new THREE.SpotLight( pointColor);var dirLight = new THREE.DirectionalLight(pointColor);dirLight.position.set(30, 10, -50);dirLight.castShadow = true;
//        dirLight.shadowCameraNear = 0.1;
//        dirLight.shadowCameraFar = 100;
//        dirLight.shadowCameraFov = 50;dirLight.target = plane;dirLight.shadowCameraNear = 0.1;dirLight.shadowCameraFar = 200;dirLight.shadowCameraLeft = -50;dirLight.shadowCameraRight = 50;dirLight.shadowCameraTop = 50;dirLight.shadowCameraBottom = -50;dirLight.shadowMapWidth = 2048;dirLight.shadowMapHeight = 2048;scene.add(dirLight);// 渲染器绑定页面元素document.getElementById("WebGL-output").appendChild(renderer.domElement);var step = 0;var invert = 1;var phase = 0;var controls = new function () {this.rotationSpeed = 0.03;this.bouncingSpeed = 0.03;this.hemisphere = true;this.color = 0x00ff00;this.skyColor = 0x0000ff;this.intensity = 0.6;};var gui = new dat.GUI();gui.add(controls, 'hemisphere').onChange(function (e) {if (!e) {hemiLight.intensity = 0;} else {hemiLight.intensity = controls.intensity;}});gui.addColor(controls, 'color').onChange(function (e) {hemiLight.groundColor = new THREE.Color(e);});gui.addColor(controls, 'skyColor').onChange(function (e) {hemiLight.color = new THREE.Color(e);});gui.add(controls, 'intensity', 0, 5).onChange(function (e) {hemiLight.intensity = e;});render();function render() {stats.update();// 立方体渲染动画cube.rotation.x += controls.rotationSpeed;cube.rotation.y += controls.rotationSpeed;cube.rotation.z += controls.rotationSpeed;// 球体渲染动画step += controls.bouncingSpeed;sphere.position.x = 20 + ( 10 * (Math.cos(step)));sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));requestAnimationFrame(render);renderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

效果如下：
在这里插入图片描述

相关文章：

学习threejs，使用HemisphereLight半球光

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.HemisphereLight 二、…...

编程日记 2026/4/9 3:27:50

天童美语：观察你的生活

在孩子的认知里&#xff0c;世界宛如一片充满神秘色彩的未知之境&#xff0c;有着无尽的奥秘等待他们去探索。家长们&#xff0c;引导孩子用心观察世界&#xff0c;领略其中的美妙&#xff0c;这对孩子的成长进程有着极为关键的作用。贵阳天童教育相信&#xff1a;观察生活&…...

编程日记 2025/8/30 21:40:54

数仓:核心概念,数仓系统(ETL,数仓分层,数仓建模),数仓建模方法(星型模型,雪花模型,星座模型)和步骤

数仓建模的核心概念 事实表&#xff08;Fact Table&#xff09;&#xff1a; 存储业务过程的度量值&#xff08;如销售额、订单数量等&#xff09;。 通常包含外键&#xff0c;用于关联维度表。 维度表&#xff08;Dimension Table&#xff09;&#xff1a; 存储描述性信息&…...

编程日记 2026/4/22 4:19:45

python 基础知识100问

目录 1 Python中函数的输入参数类型‌&#xff1a; 2 python 第一个方法参数 selt cls 3 类和面向对象 4 Python 中__init__.py 作用 5 python 元类与装饰器 元类与装饰器https://blog.csdn.net/qq_52213943/article/details/145175689?spm1001.2014.3001.5506 6 设…...

编程日记 2026/4/22 4:19:50

Linux入侵检查流程

1. 初步信息收集 1.1 系统信息 • 目的&#xff1a;了解当前系统的基本情况&#xff0c;包括操作系统版本、内核版本等。 • 命令&#xff1a; # 查看操作系统发行版信息 cat /etc/os-release # 查看内核版本 uname -r 1.2 网络信息 • 目的&#xff1a;查看网络连接状态、…...

编程日记 2025/11/14 10:26:29

pg_sql关于时间的函数

1、时间戳和日期之间的相互转换 时间戳转日期&#xff08;时间戳为数值类型&#xff0c;若为字符型需进行转换&#xff09; # 保留到秒&#xff1a;2025-10-02 04:46:40 &#xff08;字符型转换数值型&#xff09; select to_timestamp(1759351600::bigint)# 保留到日&#x…...

编程日记 2025/10/22 10:16:31

如何使用 DeepSeek R1 构建开源 ChatGPT Operator 替代方案

开源大型语言模型&#xff08;LLMs&#xff09;的兴起使得创建 AI 驱动的工具比以往任何时候都更容易&#xff0c;这些工具可以与 OpenAI 的 ChatGPT Operator 等专有解决方案相媲美。在这些开源模型中&#xff0c;DeepSeek R1 以其强大的推理能力、自由的可访问性和适应性而脱…...

编程日记 2026/4/22 13:55:15

【教程】MySQL数据库学习笔记（七）——多表操作（持续更新）

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【MySQL数据库学习】系列文章 第一章 《认识与环境搭建》 第二章 《数据类型》 第三章 《数据定义语言DDL》 第四章 《数据操…...

编程日记 2026/4/3 19:17:02

Word 公式转 CSDN 插件 发布

经过几个月的苦修&#xff0c;这款插件终于面世了。 从Word复制公式到CSDN粘贴&#xff0c;总是出现公式中的文字被单独提出来&#xff0c;而公式作为一个图片被粘贴的情况。公式多了的时候还会导致CSDN禁止进一步的上传公式。 经过对CSDN公式的研究&#xff0c;发现在粘贴公…...

编程日记 2026/4/22 4:19:51

【设计模式】 建造者模式和原型模式

建造者模式&#xff08;Builder Pattern&#xff09; 概述 建造者模式是一种创建型设计模式&#xff0c;它允许逐步构建复杂对象。通过将构造过程与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。这种模式非常适合用于创建那些具有很多属性的对象&#xff0c;尤…...

编程日记 2025/11/6 18:08:57

win7误删注册表文件夹导致exe无法执行

今天在装某个软件的时候报错 “不是有效的Win32应用程序”&#xff0c;找一篇文章于是按文章删除了注册表上的好多文件&#xff0c;之后就发现所有的exe文件都打不开了&#xff0c;更糟糕的是中间还弹出来一个“是否将IE设置为所有程度的默认执行程序”&#xff0c;没思考就点击…...

编程日记 2026/4/18 12:14:10

【ESP32接入国产大模型之Deepseek】

【ESP32接入国产大模型之Deepseek】 1. Deepseek大模型1.1 了解Deepseek api1.2 Http接口鉴权1.3. 接口参数说明1.3.1 请求体(request)参数1.3.2 模型推理 2. 先决条件2.1 环境配置2.2 所需零件 3. 核心代码3.1 源码分享3.2 源码解析3.3 连续对话修改后的代码代码说明示例输出注…...

编程日记 2026/4/13 9:19:53

C语言蓝桥杯1003: [编程入门]密码破译

要将"China"译成密码&#xff0c;译码规律是&#xff1a;用原来字母后面的第4个字母代替原来的字母&#xff0e; 例如&#xff0c;字母"A"后面第4个字母是"E"&#xff0e;"E"代替"A"。因此&#xff0c;"China"应译…...

编程日记 2026/4/22 21:18:37

New Game--（单调队列）

I - New Game 有一种新的游戏&#xff0c;Monocarp 想要玩。这个游戏使用一副包含 n 张牌的牌堆&#xff0c;其中第 i 张牌上写有一个整数 a_i。 在游戏开始时&#xff0c;Monocarp 可以在第一轮选择牌堆中的任意一张牌。在接下来的每一轮中&#xff0c;Monocarp 可以选择一张…...

编程日记 2025/12/16 3:08:10

什么是偏光环形光源

偏光环形光源是一种特殊的光源&#xff0c;常用于机器视觉、光学检测和工业自动化等领域。它结合了环形光源和偏光技术&#xff0c;能够有效减少反射、增强对比度&#xff0c;特别适用于检测高反光或表面复杂的物体。 主要特点&#xff1a; 环形设计&#xff1a;光线均匀照射物…...

编程日记 2025/11/23 13:13:30

SolidWorks速成教程P3-3【零件 | 第三节】——草图绘制面实线与构造线的区别

经过了前面的特征学习后，是不是感觉对 SolidWorks越来越熟悉了？不过发现， SolidWorks速成这套教程，对于一些基础问题，还是需要解释得更详细一些，所以在这节再补充一下草图绘制面&实线与构造线的区别。 目录 1.草图绘制面 2.实线与构造线的区别 1.草图绘制面 之前…...

编程日记 2026/4/23 9:52:15

win10中mstsc远程Centos-Stream 9图形化界面

文章目录 1 前置状态2 安装配置XRDP3 关闭SELinux3.1 查看selinux状态3.2 关闭selinux 4 启动XRDP5 Win10远程连接测试 1 前置状态 已安装CentOS9桌面版&#xff1b;Windows10。 2 安装配置XRDP sudo yum install epel-release sudo yum install xrdp sudo yum install tige…...

编程日记 2026/4/9 9:51:34

中国AI“拥抱开源”给世界的启示——Anko

事实证明&#xff0c;中国AI企业“拥抱开源”&#xff0c;不仅为自身发展开拓了新路径&#xff0c;也带动AI企业跨国合作的需求&#xff0c;并推动全球AI生态向“开源普惠”转型。Anko通过免费开放部分模型功能&#xff0c;将AI时代的数字红利公平地派发到每一位网民手中&#…...

编程日记 2026/4/6 7:11:32

DeepSeek处理自有业务的案例：让AI给你写一份小众编辑器(EverEdit)的语法着色文件

1 DeepSeek处理自有业务的案例&#xff1a;让AI给你写一份小众编辑器(EverEdit)的语法着色文件 1.1 背景 AI能力再强&#xff0c;如果不能在企业的自有业务上产生助益&#xff0c;那基本也是一无是处。将企业的自有业务上传到线上训练&#xff0c;那是脑子进水的做法&#xff…...

编程日记 2026/4/22 21:59:25

Jenkins 配置 Git Parameter 四

Jenkins 配置 Git Parameter 四 一、开启 项目参数设置 勾选 This project is parameterised 二、添加 Git Parameter 如果此处不显示 Git Parameter 说明 Jenkins 还没有安装 Git Parameter plugin 插件&#xff0c;请先安装插件 Jenkins 安装插件 三、设置基本参数 点击…...

编程日记 2026/4/23 2:35:30

力扣-二叉树-110 平衡二叉树

思路 用后序分别求出每一个节点的左子树和右子树高度&#xff0c;然后判断是否符合定义&#xff0c;再判断两个子树是否符合定义 代码 class Solution { public:int getDepth(TreeNode* node){if(node nullptr) return 0;return max( getDepth(node->left), getDepth(no…...

编程日记 2026/1/3 16:20:06

Linux 查看磁盘中的大文件

在 Linux 系统中&#xff0c;你可以使用以下方法来查看磁盘中的大文件信息&#xff1a; 1. 使用 find 命令 find 命令可以递归查找指定目录下的大文件。 find /path/to/directory -type f -size 100M -exec ls -lh {} \;/path/to/directory&#xff1a;要查找的目录路径&…...

编程日记 2026/4/21 12:59:10

网络工程师 （38）流量和差错控制

一、流量控制 流量控制是一种协调发送站和接收站工作步调的技术。它的主要目的是防止发送端发送数据过快&#xff0c;导致接收端缓冲区溢出&#xff0c;从而造成数据丢失。流量控制机制通过调整发送速率来匹配接收端的处理能力。 基本原理 发送站每发出一帧数据&#xff0c;就进…...

编程日记 2026/4/6 1:54:51

vue3多个页面/组件，复用同一段render页面根据接口返回的数据动态渲染逻辑，使用setup+组合式API

组件reusableComponent是可供多个组件复用的 getData请求接口&#xff0c;render渲染数据 <template><render /> </template> <script setup> import operationService from "/views/operation/component/operationService.vue";const prop…...

编程日记 2026/4/22 18:05:50

从零开始：Django初学者的实战之旅

一、概念引入 要基于编程开发一个完整的企业项目不管什么样的项目&#xff0c;基本都有3种不同的开发模式&#xff0c;这几种开发模式&#xff0c;如果把项目类比成建造房子则有如下&#xff1a; 1.原生开发&#xff1a;类似从0开始造房子&#xff0c;从0开始构建项目&#xf…...

编程日记 2026/4/17 7:19:47

青果教务系统逆向（js逆向）

首先我们打开f12检查以下登录函数 可以看到登录函数在checkrand中&#xff0c;直接去全局搜索函数 在这里&#xff0c;打个断点直接跳进去 可以看到参数在这里形成 这是我们发起请求需要的参数&#xff0c;把这几个参数加进去直接登录就行 那就一个一个看呗&#xff0c;第一…...

编程日记 2026/4/21 11:07:27

在Linux中Redis不支持lua脚本的处理方法

redis安装在IP为x.x.x.x的服务器上 redis安装 第一步&#xff0c;安装前&#xff0c;检测系统是否安装了redis。若安装了redis&#xff0c;则需要删除redis&#xff1b;若没有安装redis&#xff0c;则需要安装2.6版本以上的redis。 # 确保Redis版本支持Lua脚本。从Redis 2.6…...

编程日记 2026/4/17 14:17:49

WPF进阶 | 深入 WPF 依赖项属性：理解其强大功能与应用场景

WPF进阶 | 深入 WPF 依赖项属性&#xff1a;理解其强大功能与应用场景 前言一、依赖项属性基础概念1.1 什么是依赖项属性1.2 依赖项属性与 CLR 属性的区别1.3 依赖项属性的定义与注册 二、依赖项属性的原理深入剖析2.1 依赖项属性系统的工作机制2.2 元数据&#xff08;Metadata…...

编程日记 2026/4/6 21:11:01

关于 IoT DC3 中设备（Device）的理解

在物联网系统中&#xff0c;设备&#xff08;Device&#xff09;是一个非常宽泛的概念&#xff0c;它可以指代任何能够接入系统并进行数据交互的实体。包括但不限于手机、电脑、服务器、网关、硬件设备甚至是某些软件程序等所有能接入到该平台的媒介。 内容 定义 目的 示例 …...

编程日记 2026/4/19 8:24:09

从 0 开始本地部署 DeepSeek：详细步骤 + 避坑指南 + 构建可视化（安装在D盘）

个人主页&#xff1a;chian-ocean 前言&#xff1a; 随着人工智能技术的迅速发展&#xff0c;大语言模型在各个行业中得到了广泛应用。DeepSeek 作为一个新兴的 AI 公司&#xff0c;凭借其高效的 AI 模型和开源的优势&#xff0c;吸引了越来越多的开发者和企业关注。为了更好地…...

编程日记 2026/4/23 3:39:52