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

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

news 2025/12/30 5:37:29

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

实现效果

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

效果

知识点

WebGLRenderer (WebGL渲染器)

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

构造器

WebGLRenderer(parameters : Object)

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

Scene (场景)

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

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

PerspectiveCamera (透视相机)

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

构造器

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

参数类型描述
fovFloat视野角度
aspectFloat宽高比
nearFloat近裁剪面距离
farFloat远裁剪面距离
方法
  • position.set(x : Float, y : Float, z : Float)：设置相机的位置。
  • lookAt(vector : Vector3)：设置相机朝向。

HemisphereLight (半球光源)

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

构造器

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

参数类型描述
skyColorColor天空颜色
groundColorColor地面颜色
intensityFloat光源强度
属性
  • position：光源位置。

HemisphereLightHelper (半球光源辅助线)

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

构造器

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

参数类型描述
lightHemisphereLight半球光源实例
sizeFloat辅助线大小
colorColor辅助线颜色

SphereGeometry (球体几何体)

SphereGeometry用于创建球体模型。

构造器

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

参数类型描述
radiusFloat球体半径
widthSegmentsInteger经度分段数
heightSegmentsInteger纬度分段数

MeshPhongMaterial (网格Phong材质)

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

构造器

MeshPhongMaterial(parameters : Object)

参数类型描述
mapTexture环境贴图

Mesh (网格)

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

构造器

Mesh(geometry : Geometry, material : Material)

参数类型描述
geometryGeometry几何体
materialMaterial材质
方法
  • 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创建一个带有红蓝配置的半球光源的场景&#xff0c;并在其中添加一个旋转的球体。通过设置不同的光照参数&#xff0c;可以观察到球体表面材质的变化。 知识点 WebGLRenderer …...

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

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

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

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

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

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

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

消息中间件面试

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

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

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

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

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

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

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

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

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

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

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

Docker启动失败 - 解决方案

Docker启动失败 - 解决方案 问题原因解决方案service问题 问题 重启docker失败&#xff1a; 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控件&#xff0c;功能变动想支持选择多行数据。 分析 1、List控件本身支持使用SetMultiSelect接口设置是否多选&#xff1a; void SetMultiSelect(bool bMultiSel);2、List控件本身支持使用GetNextSelItem接口获取选中的下一个索引…...

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

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

1.从远程仓库下载源码 别人已经帮我下载好了在Ubuntu上。并给我权限&#xff1a;chmod -R ow /data/F200/F200-master/ 2.按照readme.txt步骤操作 安装编译环境&#xff1a; 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语言的函数实现 引言 随着大数据时代的到来&#xff0c;数据的存储和管理变得越来越复杂。SQL&#xff08;结构化查询语言&#xff09;作为关系数据库的标准语言&#xff0c;其重要性不言而喻。在SQL语言中&#xff0c;函数是一个重要的组成部分&#xff0c;可以有效地帮助…...

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

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

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

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

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

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

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

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

关注WX&#xff1a;CodingTechWork 介绍 在日常开发中&#xff0c;我们经常需要处理Excel文件中的数据。无论是从数据库导入数据、处理数据报表&#xff0c;还是批量生成数据&#xff0c;都可能会遇到需要读取和操作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实现压缩文件和目录

封装了一个类&#xff0c;方便使用SevenZipSharp&#xff0c;支持加入进度显示事件。 双重加密压缩工具范例&#xff1a; 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的高校食堂点餐系统

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

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

2025年01月09日Github流行趋势

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

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

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

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

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

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

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

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

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/12/21 20:15:17

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/12/28 6:10:07

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2025/12/27 8:16:27

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2025/12/27 7:02:26

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/10/2 9:07:50

VSCode 使用CMake 构建 Qt 5 窗口程序

首先，目录结构如下图： 运行效果： cmake -B build cmake --build build 运行： windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...

编程新知 2025/12/24 22:25:46

ABAP设计模式之---“Tell, Don’t Ask原则”

“Tell, Don’t Ask”是一种重要的面向对象编程设计原则&#xff0c;它强调的是对象之间如何有效地交流和协作。 1. 什么是 Tell, Don’t Ask 原则&#xff1f; 这个原则的核心思想是&#xff1a; “告诉一个对象该做什么&#xff0c;而不是询问一个对象的状态再对它作出决策。…...

编程新知 2025/12/30 5:35:48