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

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景

news 来源：原创 2025/5/14 12:37:50

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景

实现效果

该案例实现了使用Three.js创建一个带有聚光灯和旋转立方体的3D场景。

知识点

WebGLRenderer（WebGL渲染器）

THREE.WebGLRenderer 是 Three.js 中用于将场景渲染为 WebGL 内容的核心类。它支持抗锯齿等高级特性。

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	渲染器参数对象，包含 `antialias`、`alpha` 等属性

antialias: 布尔值，是否开启抗锯齿，默认为 false。

Scene（场景）

THREE.Scene 代表一个3D场景，所有物体都必须添加到场景中才能被渲染。

方法

add(object): 将物体添加到场景中。
background: 设置场景的背景颜色或环境贴图。

PerspectiveCamera（透视相机）

THREE.PerspectiveCamera 定义了一个透视投影相机，用于模拟人眼观察世界的方式。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	视野角度（Field of View），以度为单位
aspect	Number	宽高比
near	Number	近裁剪面距离
far	Number	远裁剪面距离

方法

position.set(x, y, z): 设置相机位置。
lookAt(vector): 设置相机朝向目标点。
updateProjectionMatrix(): 更新相机的投影矩阵。

SpotLight（聚光灯）

THREE.SpotLight 表示一个聚光灯，可以模拟手电筒或舞台灯光的效果。

构造器

new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)

参数	类型	描述
color	Color	光源颜色
intensity	Number	光照强度，默认为 1
distance	Number	光源影响的最大距离，默认为无穷大
angle	Number	聚光角度，默认为 Math.PI / 3
penumbra	Number	半影区域大小，默认为 0
decay	Number	光照衰减，默认为 1

方法

position.set(x, y, z): 设置光源位置。

SpotLightHelper（聚光灯辅助线）

THREE.SpotLightHelper 用于可视化聚光灯的光照范围。

构造器

new THREE.SpotLightHelper(spotLight, size)

参数	类型	描述
spotLight	SpotLight	要可视化的聚光灯
size	Number	辅助线的尺寸，默认为 1

BoxGeometry（立方体几何体）

THREE.BoxGeometry 用于创建一个立方体几何体。

构造器

new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

参数	类型	描述
width	Number	立方体宽度
height	Number	立方体高度
depth	Number	立方体深度
widthSegments	Number	宽度分段数，默认为 1
heightSegments	Number	高度分段数，默认为 1
depthSegments	Number	深度分段数，默认为 1

MeshPhongMaterial（网格材质）

THREE.MeshPhongMaterial 是一种基于 Phong 照明模型的材质，能够很好地表现光照效果。

构造器

new THREE.MeshPhongMaterial(parameters)

参数	类型	描述
parameters	Object	材质参数对象，包含 `color`、`map` 等属性

color: 材质颜色。
map: 纹理贴图。

Mesh（网格）

THREE.Mesh 是由几何体和材质组成的3D对象。

构造器

new THREE.Mesh(geometry, material)

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

方法

translateX(amount): 沿X轴平移指定距离。

动画函数

requestAnimationFrame 是浏览器提供的用于执行动画的方法，确保动画帧率与显示器刷新率同步。

方法

function animate() {requestAnimationFrame(animate);// 更新物体状态myMesh.rotation.x += 0.01;myMesh.rotation.y += 0.01;myMesh.rotation.z += 0.01;// 渲染场景myRenderer.render(myScene, myCamera);
}

代码

<!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>var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);$("#myContainer").append(myRenderer.domElement);var myScene = new THREE.Scene();myScene.background = new THREE.Color('white');var myCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);myCamera.position.set(179.70, 84, 146);myCamera.lookAt(new THREE.Vector3(0, 0, 0));myCamera.updateProjectionMatrix();var mySpotLight = new THREE.SpotLight('lightgreen');mySpotLight.position.set(0, 100, 100);myScene.add(mySpotLight);var mySpotLightHelper = new THREE.SpotLightHelper(mySpotLight, 'green');myScene.add(mySpotLightHelper);var myBoxGeometry = new THREE.BoxGeometry(50, 50, 50);var myMap = THREE.ImageUtils.loadTexture("images/img002.jpg");var myMaterial = new THREE.MeshPhongMaterial({map: myMap});var myMesh = new THREE.Mesh(myBoxGeometry, myMaterial);myMesh.translateX(100);myScene.add(myMesh);function animate() {requestAnimationFrame(animate);myMesh.rotation.x += 0.01;myMesh.rotation.y += 0.01;myMesh.rotation.z += 0.01;myRenderer.render(myScene, myCamera);}animate();
</script>
</body>
</html>

演示链接

示例链接

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景实现效果该案例实现了使用Three.js创建一个带有聚光灯和旋转立方体的3D场景。知识点 WebGLRenderer（WebGL渲染器） THREE.WebGLRenderer 是 Three.js 中用于将场景渲染为 WebGL 内容的核…...

编程日记 2025/5/14 12:37:50

移动端可互动轮播图

首先通过事件监听获得到初始滑动位置，并关闭掉轮播图的自动轮播定时器 //设置事件代理 $(".slider").on("touchstart", function (e) {// 当滑动触发的时候关闭定时器clearInterval(time);// 开始时的pxstartX e.touches[0].clientX; }); 然…...

编程日记 2025/5/14 19:57:19

深入讲解 Docker 及实践

Docker 是现代化应用开发、测试和生产环境部署中不可或缺的工具。它能够为开发人员提供与生产环境一致的开发环境，同时支持高效的容器化部署、资源隔离、容器编排等高级功能。尤其在微服务架构和云原生应用中，Docker 更是提供了简化的流程和高效的可扩展…...

编程日记 2025/5/12 2:48:18

科大讯飞前端面试题及参考答案（上）

前端有用到哪些数据结构？在前端开发中，会运用到多种数据结构，以下是一些常见的类型及其应用场景。数组（Array）数组是一种有序的元素集合，可以存放不同类型的数据（在 JavaScript 等前端常用语言中）。比如在构建一个网页的列表展示时，像新闻列表、商品列表等，我们可…...

编程日记 2025/5/14 20:08:07

本地导入封装的模块在docker内报错ImportError

本地封装了一个login方法在写testcase的时候去复用这个方法但是进入docker运行的时候一直报上面的错误目录出现的原因： 解决方法： 1. 根据docker的路径写绝对路径 2. 用sys 加入path到code 作用： 好处： 出现的原因…...

编程日记 2025/5/14 20:39:35

Java-日志技术大全

一：目录 1.jul的使用 2.log4j的使用 3.logback的使用 4.log4j2的使用二：jul使用 jul是JDK自带的日志技术，不需要导入其他依赖，默认的级别为info 1.关键组件： (1).Logger：记录器 (2).Handler&…...

编程日记 2025/5/10 11:28:03

ARP-Batch-Retargeting 部署实战

git 地址： https://github.com/Shimingyi/ARP-Batch-Retargeting bpy安装： pypi上搜索 bpy bpy 4.3.0，4.2.0版本报错： Traceback (most recent call last):File "E:\project\jijia_4d\retarget\ARP-Batch-Retargeting-…...

编程日记 2025/5/14 20:58:12

二分查找题目：寻找峰值 II

文章目录题目标题和出处难度题目描述要求示例数据范围解法思路和算法证明代码复杂度分析题目标题和出处标题：寻找峰值 II 出处：1901. 寻找峰值 II 难度 7 级题目描述要求一个二维网格中的峰值元素是指其值严格大于相邻值（左、…...

编程日记 2025/5/7 7:03:20

调和级数不为整数的证明

文章目录 1. 问题引入2. 证明2.1 引理12.2 引理22.3 引理3：2.4 核心证明： 3. 参考 1. 问题引入 s ( n ) 1 1 2 1 3 ⋯ 1 n , n ∈ N ∗ , n ≥ 2 s(n) 1\frac{1}{2}\frac{1}{3}\cdots\frac{1}{n}, \quad \\n \in N^*, n \ge2 s(n)12131⋯n1,…...

编程日记 2025/5/14 20:19:44

Redis 源码分析-内部数据结构 dict

Redis 源码分析-内部数据结构 dict 在上一篇 Redis 数据库源码分析提到了 Redis 其实用了全局的 hash 表来存储所有的键值对，即下方图示的 dict，dict 中有两个数组，其中 ht[1] 只在 rehash 时候才真正用到，平时都是指向 null&am…...

编程日记 2025/5/14 20:19:44

git相关操作笔记

git相关操作笔记 1. git init git init 是一个 Git 命令，用于初始化一个新的 Git 仓库。执行该命令后，Git 会在当前目录创建一个 .git 子目录，这是 Git 用来存储所有版本控制信息的地方。使用方法如下： （1&#xff…...

编程日记 2025/5/11 7:01:57

STM32小实验2

定时器实验 TIM介绍 TIM（Timer）定时器定时器可以对输入的时钟进行计数，并在计数值达到设定值时触发中断 16位计数器、预分频器、自动重装寄存器的时基单元，在72MHz计数时钟下可以实现最大59.65s的定时不仅具备基本的定时中断…...

编程日记 2025/5/14 20:30:51

Oracle Dataguard（主库为双节点集群）配置详解（2）：备库安装 Oracle 软件

Oracle Dataguard（主库为双节点集群）配置详解（2）：备库安装 Oracle 软件目录 Oracle Dataguard（主库为双节点集群）配置详解（2）：备库安装 Oracle 软件一、Orac…...

编程日记 2025/5/11 9:53:08

基于 Pod 和 Service 注解的服务发现

基于 Pod 和 Service 注解的服务发现背景很多应用会为 Pod 或 Service 打上一些注解用于 Prometheus 的服务发现，如 prometheus.io/scrape: "true"，这种注解并不是 Prometheus 官方支持的，而是社区的习惯性用法，要使…...

编程日记 2025/5/11 2:41:41

操作系统之文件的逻辑结构

目录无结构文件（流式文件） 有结构文件（记录式文件） 分类： 顺序文件特点： 存储方式： 逻辑结构： 优缺点： 索引文件目的： 结构： 特点…...

编程日记 2025/5/13 3:11:02

网络分析与监控：阿里云拨测方案解密

作者：俞嵩(榆松) 随着互联网的蓬勃发展，网络和服务的稳定性已成为社会秩序中不可或缺的一部分。一旦网络和服务发生故障，其带来的后果将波及整个社会、企业和民众的生活质量，造成难以估量的损失。 2020 年 12 月： Ak…...

编程日记 2025/5/9 13:30:22

vue实现虚拟列表滚动

<template> <div class"cont"> //box 视图区域Y轴滚动滚动的是box盒子滚动条显示的也是因为box<div class"box">//itemBox。一个空白的盒子计算高度为所有数据的高度固定每一条数据高度为50px<div class"itemBox" :st…...

编程日记 2025/5/14 6:58:31

服务器/电脑与代码仓gitlab/github免密连接

git config --global user.name "xxxx" git config --global user.email "xxxxxx163.com" #使用注册GitHub的邮箱生成对应邮箱的密码对 ssh-keygen -t rsa -b 4096 -C "xxxxxx163.com" 把公钥id_rsa.pub拷贝到github中 Setting----->…...

编程日记 2025/5/12 12:21:23

用户界面软件03

一种标准的满足不同的非功能性需求的技术是对子系统进行不同的考虑……但是一个用户界面要求有大量的域层面的信息，以符合比较高的人机工程标准，所以，这些分开的子系统还是紧密地耦合在一起的。一个软件架构师的标准反应是将不同的非功能…...

编程日记 2025/5/11 9:10:12

在这里插入图片描述  <divstyle"width: 290px; height: 580px; margin-left: 20px; margin-top: 20px; background: url(D:/nianhu…...

编程日记 2025/5/14 5:23:22

（一）Ubuntu20.04版本的ROS环境配置与基本概述

前言 ROS不需要在特定的环境下进行安装，不管你是Ubuntu的什么版本或者还是虚拟机都可以按照教程进行安装。 1.安装ROS 一键安装ros及ros2 wget http://fishros.com/install -O fishros && . fishros 按照指示安装你想要的ros。 ros和ros2是可以兼容的…...

编程日记 2025/5/10 23:23:20

深入分析线程安全问题的本质

深入分析线程安全问题的本质 1. 并发编程背后的性能博弈2. 什么是线程安全问题？3. 源头之一：原子性问题3.1. 原子性问题示例3.2. 原子性问题分析3.3. 如何解决原子性问题？ 4. 源头之二：可见性问题4.1. 为什么会有可见性问题&#…...

编程日记 2025/5/8 10:42:37

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

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

编程日记 2025/5/9 10:07:54

插入实体自增主键太长，mybatis-plaus自增主键

1、问题 spring-boot整合mybtais执行insert语句时，主键id为长文本数据。 2、分析问题 1)数据库主键是否自增 2）数据库主键的种子值设置的多少 3、解决问题 1）数据库主键设置的时自增 3）种子值是1 所以排查是数据库的问题 4、继…...

编程日记 2025/5/8 12:03:52

【利用 Unity + Mirror 网络框架、Node.js 后端和 MySQL 数据库】

要实现一个简单的1v1战斗小游戏，利用 Unity Mirror 网络框架、Node.js 后端和 MySQL 数据库，我们可以将其分为几个主要部分：客户端（Unity）、服务器（Node.js）和数据库（MySQL&#xf…...

编程日记 2025/5/14 6:34:48

https原理

一、基本概念 1、https概念 https（全称： Hypertext Transfer Protocol Secure，超文本传输安全协议），是以安全为目标的http通道，简单讲是http的安全版。 2、为啥说http协议不安全呢？ 我们用h…...

编程日记 2025/5/11 21:36:34

如何处理京东商品详情接口返回的JSON数据中的缺失值？

1.在 Python 中处理缺失值使用if - else语句进行检查和处理假设通过requests库获取了接口返回的 JSON 数据，并使用json模块进行解析，存储在data变量中。 import json import requestsurl "YOUR_API_URL" response requests.get(url) dat…...

编程日记 2025/5/14 5:37:59

window对象

bom dom部分学完了，来看看bom吧~ bom是整个浏览器，本质上bom与dom是包含的关系，window是里面最大的对象调用的方法默认对象是window，一般都会省略前面的window 创建的全局变量也是属于window的，当然window也可以省…...

编程日记 2025/5/9 13:10:14

（五）ROS通信编程——参数服务器

前言参数服务器在ROS中主要用于实现不同节点之间的数据共享（P2P）。参数服务器相当于是独立于所有节点的一个公共容器，可以将数据存储在该容器中，被不同的节点调用，当然不同的节点也可以往其中存储数据，关…...

编程日记 2025/5/11 6:00:33

MySQL常用命令之汇总（Summary of Commonly Used Commands in MySQL）

MySQL常用命令汇总简介 ‌MySQL是一个广泛使用的开源关系型数据库管理系统，由瑞典的MySQL AB公司开发，现属于Oracle公司。‌ MySQL支持SQL（结构化查询语言），这是数据库操作的标准语言，用户可以使用SQL进…...

编程日记 2025/5/13 15:09:57

更新至2023年，各省数字经济变量/各省数字经济相关指标数据集（20个指标）

更新至2023年，各省数字经济相关指标数据集（20个指标） 1、时间：更新至2023年，具体时间如下 2、指标：互联网宽带接入端口(万个)（2006-2023）、互联网宽带接入用户(万户)（2…...

编程日记 2025/5/5 22:22:18

聚类系列 (二)——HDBSCAN算法详解

在进行组会汇报的时候，为了引出本研究动机（论文尚未发表，暂不介绍），需要对DBSCAN、OPTICS、和HDBSCAN算法等进行详细介绍。在查询相关资料的时候，发现网络上对于DBSCAN算法的介绍非常多与细致，但…...

编程日记 2025/5/8 13:54:41

【JavaEE】—— SpringBoot项目集成百度千帆AI大模型（对话Chat V2）

本篇文章在SpringBoot项目中集成百度千帆提供的大模型接口实现Chat问答效果： 一、百度智能云百度千帆大模型平台是百度智能云推出的一个企业级一站式大模型与AI原生应用开发及服务平台。注册地址：https://qianfan.cloud.baidu.com/ 注册成功后&…...

编程日记 2025/5/11 17:54:40

一种更激进的Hook实现方案猜想

XXX原创不原创不清楚，暂定为原创。毕竟windows 大神很多XXX 昨天才发现不是原创，这种方案是VEH HOOK的一种实现方案。VEH HOOK很久很久以前都被广泛使用了。只是自己没听说过。好悲哀呀。。。。激进的猜想： 如果VEH HOOK在内核态处理异常…...

编程日记 2025/5/7 14:06:14

HTML5实现好看的端午节网页源码

HTML5实现好看的端午节网页源码前言一、设计来源1.1 网站首页界面1.2 登录注册界面1.3 端午节由来界面1.4 端午节习俗界面1.5 端午节文化界面1.6 端午节美食界面1.7 端午节故事界面1.8 端午节民谣界面1.9 联系我们界面二、效果和源码2.1 动态效果2.2 源代码源码下载结束语 H…...

编程日记 2025/5/14 7:07:38

微信小程序获取图片使用session（上篇）

概述： 我们开发微信小程序，从后台获取图片现实的时候，通常采用http get的方式，例如以下代码 <image class"user_logo" src"{{logoUrl}}"></image>变量logoUrl为ur图片l的请求地址但是对于很多…...

编程日记 2025/5/12 14:38:05

RT-DETR融合YOLOv9的下采样模块ADown

RT-DETR使用教程： RT-DETR使用教程 RT-DETR改进汇总贴：RT-DETR更新汇总贴《YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information》一、模块介绍论文链接：https://arxiv.org/abs/2402.13616 代码链接&…...

编程日记 2025/5/6 19:56:37

【机器学习案列】学生抑郁可视化及预测分析

🧑 博主简介：曾任某智慧城市类企业算法总监，目前在美国市场的物流公司从事高级算法工程师一职，深耕人工智能领域，精通python数据挖掘、可视化、机器学习等，发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/5/13 0:27:01

CES 2025｜美格智能高算力AI模组助力“通天晓”人形机器人震撼发布

当地时间1月7日，2025年国际消费电子展（CES 2025）在美国拉斯维加斯正式开幕。美格智能合作伙伴阿加犀联合高通在展会上面向全球重磅发布人形机器人原型机——通天晓（Ultra Magnus）。该人形机器人内置美格智能基于高通QC…...

编程日记 2025/5/9 18:14:48

Linux第一个系统程序---进度条

进度条---命令行版本回车换行其实本质上回车和换行是不同概念，我们用一张图来简单的理解一下： 在计算机语言当中： 换行符：\n 回车符：\r \r\n：回车换行这时候有人可能会有疑问：我在学习C…...

编程日记 2025/5/7 23:48:20

黑马跟学.苍穹外卖.Day04

黑马跟学.苍穹外卖.Day04 苍穹外卖-day04课程内容1. Redis入门1.1 Redis简介1.2 Redis下载与安装1.2.1 Redis下载1.2.2 Redis安装 1.3 Redis服务启动与停止1.3.1 服务启动命令1.3.2 客户端连接命令1.3.3 修改Redis配置文件1.3.4 Redis客户端图形工具 2. Redis数据类型2.1 五种常…...

编程日记 2025/5/8 1:53:06

人生第一次面试之依托答辩

今天收到人生的第一场面试，是东华软件集团。答的那是依托答辩，就面了20分钟，还没考算法。其实依托答辩的效果是意料之中的，这次面试也只是想练练手。目录静态变量什么时候加载的？ 重写和重载有什么区别&#xff1…...

编程日记 2025/5/9 12:49:39

STM32 : PWM 基本结构

这张图展示了PWM（脉冲宽度调制）的基本结构和工作流程。PWM是一种用于控制功率转换器输出电压的技术，通过调整信号的占空比来实现对负载的精确控制。以下是详细讲解： PWM 基本结构 1. 时基单元 ARR (Auto-reload register): 自动…...

编程日记 2025/5/9 18:15:02

【大模型（LLM）面试全解】深度解析 Layer Normalization 的原理、变体及实际应用

系列文章目录大模型（LLMs）基础面 01-大模型（LLM）面试全解：主流架构、训练目标、涌现能力全面解析 02-【大模型（LLM）面试全解】深度解析 Layer Normalization 的原理、变体及实际应用大模型&…...

编程日记 2025/5/10 4:35:40

《浮岛风云》V1.0中文学习版

《浮岛风云》中文版https://pan.xunlei.com/s/VODadt0vSGdbrVOBEsW9Xx8iA1?pwdy7c3# 一款有着类似暗黑破坏神的战斗系统、类似最终幻想的奇幻世界和100%可破坏体素环境的动作冒险RPG。...

编程日记 2025/5/3 17:41:19

学习threejs，导入babylon格式的模型

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.BabylonLoader babyl…...

编程日记 2025/5/14 5:23:22

Django 社团管理系统的设计与实现

标题:Django 社团管理系统的设计与实现内容:1.摘要本文介绍了 Django 社团管理系统的设计与实现。通过分析社团管理的需求，设计了系统的架构和功能模块，并使用 Django 框架进行了实现。系统包括社团信息管理、成员管理、活动管理、财务管理等功能&…...

编程日记 2025/5/8 0:09:53

2025 GitCode 开发者冬日嘉年华：AI 与开源的深度交融之旅

在科技的浪潮中，AI 技术与开源探索的火花不断碰撞，催生出无限可能。2025 年 1 月 4 日，由 GitCode 联合 CSDN COC 城市开发者社区精心打造的开年首场开发者活动：冬日嘉年华在北京中关村 • 鼎好 DH3-A 座 22 层盛大举行&#xff0…...

编程日记 2025/5/9 8:35:28

嵌入式系统 tensorflow

🎬 秋野酱：《个人主页》 🔥 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长文章目录探索嵌入式系统中的 TensorFlow：机遇与挑战一、TensorFlow 适配嵌入式的优势二、面临的硬件瓶颈三、软件优化策略四、实…...

编程日记 2025/5/4 12:32:20

Web无障碍

文章目录 🟢Web Accessibility-Web无障碍🟢一、Web Accessibility-Web1. web无障碍设计2. demo3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢) 如有其他更好方案，可以私信我哦✒️总结 🟢Web Accessibility-Web无障碍…...

编程日记 2025/5/12 12:59:18

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景

实现效果

知识点

WebGLRenderer（WebGL渲染器）

构造器

Scene（场景）

方法

PerspectiveCamera（透视相机）

构造器

方法

SpotLight（聚光灯）

构造器

方法

SpotLightHelper（聚光灯辅助线）

构造器

BoxGeometry（立方体几何体）

构造器

MeshPhongMaterial（网格材质）

构造器

Mesh（网格）

构造器

方法

动画函数

方法

代码

演示链接

相关文章：