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

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景

news 2026/5/21 12:44:57

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景

实现效果

本案例展示了如何使用Three.js创建一个带有红蓝配置的半球光源的场景，并在其中添加一个旋转的球体。通过设置不同的光照参数，可以观察到球体表面材质的变化。

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer是Three.js中最常用的渲染器之一，用于将3D场景渲染到网页上。

构造器

WebGLRenderer(parameters : Object)

参数	类型	描述
antialias	Boolean	是否开启抗锯齿，默认为false

Scene (场景)

Scene是所有可见对象的容器，它定义了场景中的物体、灯光等元素。

方法

add(object : Object3D)：向场景中添加对象。
background：设置场景的背景颜色或纹理。

PerspectiveCamera (透视相机)

PerspectiveCamera模拟人眼的视角，提供更真实的视觉效果。

构造器

PerspectiveCamera(fov : Float, aspect : Float, near : Float, far : Float)

参数	类型	描述
fov	Float	视野角度
aspect	Float	宽高比
near	Float	近裁剪面距离
far	Float	远裁剪面距离

方法

position.set(x : Float, y : Float, z : Float)：设置相机的位置。
lookAt(vector : Vector3)：设置相机朝向。

HemisphereLight (半球光源)

HemisphereLight模拟天空和地面之间的自然光，通常用于环境照明。

构造器

HemisphereLight(skyColor : Color, groundColor : Color, intensity : Float)

参数	类型	描述
skyColor	Color	天空颜色
groundColor	Color	地面颜色
intensity	Float	光源强度

属性

position：光源位置。

HemisphereLightHelper (半球光源辅助线)

HemisphereLightHelper用于可视化半球光源的影响范围。

构造器

HemisphereLightHelper(light : HemisphereLight, size : Float, color : Color)

参数	类型	描述
light	HemisphereLight	半球光源实例
size	Float	辅助线大小
color	Color	辅助线颜色

SphereGeometry (球体几何体)

SphereGeometry用于创建球体模型。

构造器

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer)

参数	类型	描述
radius	Float	球体半径
widthSegments	Integer	经度分段数
heightSegments	Integer	纬度分段数

MeshPhongMaterial (网格Phong材质)

MeshPhongMaterial基于Phong光照模型，适用于光滑表面的材质。

构造器

MeshPhongMaterial(parameters : Object)

参数	类型	描述
map	Texture	环境贴图

Mesh (网格)

Mesh将几何体和材质组合在一起，形成可渲染的对象。

构造器

Mesh(geometry : Geometry, material : Material)

参数	类型	描述
geometry	Geometry	几何体
material	Material	材质

方法

position.set(x : Float, y : Float, z : Float)：设置网格位置。
rotation.x/y/z += value：绕轴旋转。

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>// 创建渲染器，并开启抗锯齿处理const myRenderer = new THREE.WebGLRenderer({antialias: true});// 设置渲染器的大小为窗口的宽度和高度myRenderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器的DOM元素添加到ID为"myContainer"的HTML元素中$("#myContainer").append(myRenderer.domElement);// 创建一个新的Three.js场景const myScene = new THREE.Scene();// 设置场景的背景颜色为白色myScene.background = new THREE.Color('white');// 创建一个透视相机，设置其视野角度、长宽比、近裁剪面和远裁剪面const myCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 设置相机的位置myCamera.position.set(-131.98, 189.53, 119.55);// 设置相机朝向myCamera.lookAt(new THREE.Vector3(0, 0, 0));// 创建并添加红蓝配置的半球光源const myHemisphereLight = new THREE.HemisphereLight('red', 'blue', 1);myHemisphereLight.position.set(0, -100, -100);myScene.add(myHemisphereLight);// 绘制半球光源辅助线const myHemisphereLightHelper = new THREE.HemisphereLightHelper(myHemisphereLight, 100, 'red');myScene.add(myHemisphereLightHelper);// 创建球体const myGeometry = new THREE.SphereGeometry(60, 40, 40);const myMap = THREE.ImageUtils.loadTexture("images/img007.jpg");const myMaterial = new THREE.MeshPhongMaterial({map: myMap});const myMesh = new THREE.Mesh(myGeometry, myMaterial);myMesh.position.set(0, 90, 100);myScene.add(myMesh);// 渲染图形animate();function animate() {requestAnimationFrame(animate);myMesh.rotation.x += 0.01;myMesh.rotation.y += 0.01;myMesh.rotation.z += 0.01;myRenderer.render(myScene, myCamera);}
</script>
</body>
</html>

演示链接

示例链接

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景实现效果本案例展示了如何使用Three.js创建一个带有红蓝配置的半球光源的场景，并在其中添加一个旋转的球体。通过设置不同的光照参数，可以观察到球体表面材质的变化。知识点 WebGLRenderer …...

编程日记 2025/1/11 0:55:21

【Git原理和使用】Git 分支管理（创建、切换、合并、删除、bug分支）

一、理解分支我们可以把分支理解为一个分身，这个分身是与我们的主身是相互独立的，比如我们的主身在这个月学C，而分身在这个月学java，在一个月以后我们让分身与主身融合，这样主身在一个月内既学会了C，也学…...

编程日记 2025/1/11 0:47:08

义乌购的反爬虫机制怎么应对？

在面对义乌购的反爬虫机制时，可以采取以下几种策略来应对： 1. 使用代理IP 义乌购可能会对频繁访问的IP地址进行限制，因此使用代理IP可以有效地隐藏爬虫的真实IP地址，避免被封禁。可以构建一个代理IP池，每次请求时随机…...

编程日记 2025/1/11 0:46:07

消息中间件面试

RabbitMQ 如何保证消息不丢失消息重复消费死信交换机消息堆积怎么解决高可用机制 Kafka 如何保证消息不丢失如何保证消息的顺序性高可用机制数据清理机制实现高性能的设计...

编程日记 2025/1/11 0:43:04

基于CLIP和DINOv2实现图像相似性方面的比较

概述在人工智能领域，CLIP和DINOv2是计算机视觉领域的两大巨头。CLIP彻底改变了图像理解，而DINOv2为自监督学习带来了新的方法。在本文中，我们将踏上一段旅程，揭示定义CLIP和DINOv2的优势和微妙之处。我们的目标是发现这些模型…...

编程日记 2025/1/11 0:41:02

利用Python爬虫获取API接口：探索数据的力量

引言在当今数字化时代，数据已成为企业、研究机构和个人获取信息、洞察趋势和做出决策的重要资源。Python爬虫作为一种高效的数据采集工具，能够帮助我们自动化地从互联网上获取大量的数据。而API接口作为数据获取的重要途径之一，为我们提供了…...

编程日记 2025/1/11 0:39:00

【LeetCode】力扣刷题热题100道（1-5题）附源码链表子串中位数回文子串（C++）

目录 1.两数之和 2.两数相加-链表 3.无重复字符的最长子串 4.寻找两个正序数组的中位数 5.最长回文子串 1.两数之和给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那两个整数，并返回它们的数组下标。…...

编程日记 2025/1/11 0:35:57

Docker启动失败 - 解决方案问题原因解决方案service问题问题重启docker失败： toolchainendurance:~$ sudo systemctl restart docker Job for docker.service failed because:the control process exited with error codesee:"systemctl status docker.se…...

编程日记 2025/1/11 0:31:53

【Duilib】 List控件支持多选和获取选择的多条数据

问题使用Duilib库写的一个UI页面用到了List控件，功能变动想支持选择多行数据。分析 1、List控件本身支持使用SetMultiSelect接口设置是否多选： void SetMultiSelect(bool bMultiSel);2、List控件本身支持使用GetNextSelItem接口获取选中的下一个索引…...

编程日记 2025/1/11 0:30:50

android系统的一键编译与非一键编译拆包刷机方法

1.从远程仓库下载源码别人已经帮我下载好了在Ubuntu上。并给我权限：chmod -R ow /data/F200/F200-master/ 2.按照readme.txt步骤操作安装编译环境： sudo apt-get update sudo apt-get install git-core gnupg flex bison gperf build-essential z…...

编程日记 2025/1/11 0:24:43

SQL语言的函数实现

SQL语言的函数实现引言随着大数据时代的到来，数据的存储和管理变得越来越复杂。SQL（结构化查询语言）作为关系数据库的标准语言，其重要性不言而喻。在SQL语言中，函数是一个重要的组成部分，可以有效地帮助…...

编程日记 2025/1/11 0:22:42

OSPF - 2、3类LSA（Network-LSA、NetWork-Sunmmary-LSA）

前篇博客有对常用LSA的总结 2类LSA（Network-LSA） DR产生泛洪范围为本区域作用: 描述MA网络拓扑信息和网络信息，拓扑信息主要描述当前MA网络中伪节点连接着哪几台路由。网络信息描述当前网络的掩码和DR接口IP地址。影响邻居建立中说到…...

编程日记 2025/1/11 0:18:36

运动相机拍摄的视频打不开怎么办

3-10 GoPro和大疆DJI运动相机的特点，小巧、高清、续航长、拍摄稳定，很多人会在一些重要场合用来拍摄视频，比如可以用来拿在手里拍摄快速运动中的人等等。但是毕竟是电子产品，有时候是会出点问题的，比如意外断电、摔重…...

编程日记 2025/1/11 0:16:32

SpringBoot | 使用Apache POI库读取Excel文件介绍

关注WX：CodingTechWork 介绍在日常开发中，我们经常需要处理Excel文件中的数据。无论是从数据库导入数据、处理数据报表，还是批量生成数据，都可能会遇到需要读取和操作Excel文件的场景。本文将详细介绍如何使用Java中的Apache PO…...

编程日记 2025/1/11 0:10:28

从configure.ac到构建环境：解析Mellanox OFED内核模块构建脚本

在软件开发过程中，特别是在处理复杂的内核模块如Mellanox OFED（OpenFabrics Enterprise Distribution）时，构建一个可移植且高效的构建系统至关重要。Autoconf和Automake等工具在此过程中扮演着核心角色。本文将深入解析一个用于准备Mellanox OFED内核模块构建环境的Autocon…...

编程日记 2025/1/11 0:08:25

c#使用SevenZipSharp实现压缩文件和目录

封装了一个类，方便使用SevenZipSharp，支持加入进度显示事件。双重加密压缩工具范例： using SevenZip; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Threading.…...

编程日记 2025/1/11 0:07:24

【从0带做】基于Springboot3+Vue3的高校食堂点餐系统

大家好，我是武哥，最近给大家手撸了一个基于SpringBoot3Vue3的高校食堂点餐系统，可用于毕业设计、课程设计、练手学习，系统全部原创，如有遇到网上抄袭站长的，欢迎联系博主~ 详细介绍 https://www.javaxm.c…...

编程日记 2025/1/11 0:06:24

2025年01月09日Github流行趋势

1. 项目名称：khoj 项目地址url：https://github.com/khoj-ai/khoj项目语言：Python历史star数：22750今日star数：1272项目维护者：debanjum, sabaimran, MythicalCow, aam-at, eltociear项目简介：你…...

编程日记 2025/1/11 0:05:20

PostgreSQL学习笔记（二）：PostgreSQL基本操作

PostgreSQL 是一个功能强大的开源关系型数据库管理系统 (RDBMS)，支持标准的 SQL 语法，并扩展了许多功能强大的操作语法. 数据类型数值类型数据类型描述存储大小示例值SMALLINT小范围整数，范围：-32,768 到 32,7672 字节-123INTE…...

编程日记 2025/1/11 0:02:17

关于内网外网，ABC类地址，子网掩码划分

本文的三个关键字是：内网外网，ABC类地址，子网掩码划分。围绕以下问题展开： 如何从ip区分外网、内网？win和linux系统中，如何查询自己的内网ip和外网ip。开发视角看内外网更多是处于安全考虑，接口…...

编程日记 2025/1/11 0:01:16

STM32F427 平替方案全面解析：从性能到成本的最优选择

文章摘要STM32F427 作为意法半导体 (ST) 旗下高性能 Cortex-M4 内核 MCU 的代表产品，凭借其 180MHz 主频、丰富的外设接口和出色的浮点运算能力，长期占据工业控制、医疗设备、智能仪表等中高端嵌入式市场的核心地位。然而近年来，全球芯片供应…...

编程新知 2026/5/21 11:12:28

ComfyUI Manager 架构设计与性能优化：从插件管理到系统集成的完整解决方案

ComfyUI Manager 架构设计与性能优化：从插件管理到系统集成的完整解决方案【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and e…...

编程新知 2026/5/21 10:25:22

构建智能交易系统：高效掌握缠论量化实战技巧

构建智能交易系统：高效掌握缠论量化实战技巧【免费下载链接】chan.py 开放式的缠论python实现框架，支持形态学/动力学买卖点分析计算，多级别K线联立，区间套策略，可视化绘图，多种数据接入，策略开…...

编程新知 2026/5/21 9:43:09

GD32F103 DAC输出不稳？排查DMA传输和定时器触发的5个常见坑点

GD32F103 DAC输出不稳？排查DMA传输和定时器触发的5个常见坑点在嵌入式开发中，DAC（数字模拟转换器）的稳定输出对许多应用至关重要。然而，当使用GD32F103的DAC功能时，开发者常常会遇到输出波形不稳定、数据错…...

编程新知 2026/5/21 9:24:27

Windows右键菜单终极清理指南：3分钟打造高效工作环境

Windows右键菜单终极清理指南：3分钟打造高效工作环境【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是不是也曾对着电脑右键菜单里密密麻麻的选项…...

编程新知 2026/5/21 9:11:28