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

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

news 2026/2/10 23:22:52

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。权限校验…...

编程新知 2026/1/13 9:59:27

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2026/1/24 13:05:24

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题：3564. 季节性销售分析题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2026/2/10 3:44:54

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群一、主从架构的不足与Dledger的定位主从架构缺陷数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

Map相关知识

数据结构二叉树二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只有左子节点，有的节点只有…...

编程新知 2026/2/4 16:21:14

企业如何增强终端安全？

在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性高精度：24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

算法笔记2

1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

【 java 虚拟机知识第一篇】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍内存模型主要分…...

编程新知 2026/1/31 8:12:12

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

Scene (场景)

方法

PerspectiveCamera (透视相机)

构造器

方法

HemisphereLight (半球光源)

构造器

属性

HemisphereLightHelper (半球光源辅助线)

构造器

SphereGeometry (球体几何体)

构造器

MeshPhongMaterial (网格Phong材质)

构造器

Mesh (网格)

构造器

方法

代码

演示链接

相关文章：