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

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

news 2026/1/2 20:50:25

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/1/9 7:05:16

第八讲一元函数积分学的概念和性质

不定积分 1.原函数与不定积分需知道：F(X)可导必连续 2.原函数（不定积分）存在定理 (1)连续函数f(x)必有原函数F(x) (2)含有第一类间断点和无穷间断点的函数f(x)在包含该间断点的区间内必没有原函数F(x). 速记：只有震荡可能有…...

编程日记 2025/1/9 7:02:13

ADMM原理及应用

文章目录 1. ADMM原理1.1. 数学形式1.2. 传统“乘子法”和它的不足1.3. ADMM 的核心思想：分步做1.4. Scaled Form of ADMM1.5. 迭代过程中主要检查的两大残差1.6. 怎么设置停止准则(Stopping Criteria)？1.7. 自适应调整罚参数 ρ \rho ρ（又…...

编程日记 2025/1/9 7:01:12

mysql之sql的优化方案（重点）

1、全字段匹配是最棒的假如一个Staffs 这个表，将 name,age ,pos 组合成了一个联合索引，在where条件下，能够使用到的索引越多越好。 EXPLAIN SELECT * FROM staffs WHERE NAME July; EXPLAIN SELECT * FROM staffs WHERE NAME July AND age…...

编程日记 2025/1/9 7:00:10

【LeetCode】303. 区域和检索 - 数组不可变

目录描述Python1. 前缀和描述给定一个整数数组nums，处理以下类型的多个查询：计算索引left和right（包含left和right）之间的nums元素的和 ，其中left < right 实现NumArray类： NumArray(int[] nums)&a…...

编程日记 2025/1/9 6:58:08

前端开发 vue 中如何实现 u-form 多个form表单同时校验

在 Vue 项目中使用 UView UI 的 u-form 组件时，多个表单同时校验的需求非常常见。例如，当我们有多个表单需要在同一个页面中进行校验并提交时，我们需要确保每个表单都能进行单独验证，同时可以在同一时刻进行批量验证。接下来&am…...

编程日记 2025/1/9 6:55:05

【网络】什么是速率 (Rate）带宽 (Bandwidth)吞吐量 (Throughput)？

注意单位： 在 kbps、Mbps、Gbps 中，前面的 k、M、G 是国际单位制(SI) 的前缀，表示不同的数量级： k（千/kilo）: (10^3 1,000) kbps（kilobits per second）: 每秒 1,000 位&#xff08…...

编程日记 2025/1/9 6:53:02

（leetcode算法题）769. 最多能完成排序的块

Q1. 是否能用贪心算法？为什么？ 先预设一个策略，每当当前的nums[i]满足可以 "成块"，就直接让这个数成块，也就是说之后的遍历过程中不会将这个数在考虑到自己的块内， "成块" 是指只要只…...

编程日记 2025/1/9 6:49:56

高光谱相机的特点

光谱特性高光谱分辨率：能将光谱范围分割成极窄的波段，光谱分辨率通常达到纳米级甚至亚纳米级，可精确捕捉到不同物质在细微光谱差异上的特征，比如可以区分不同种类的植被因叶绿素含量等差异而在光谱上的细微变化。多波段探测&a…...

编程日记 2025/1/9 6:47:54

《Spring Framework实战》8：4.1.3.Bean 概述

欢迎观看《Spring Framework实战》视频教程 Spring IoC 容器管理一个或多个 bean。这些 bean 是使用您提供给容器的配置元数据（例如，以 XML <bean/>定义的形式）。在容器本身中，这些 bean 定义表示为BeanDefinition对象&a…...

编程日记 2025/1/9 6:44:51

BGP的local_preference本地优先级属性

一、BGP的local preference属性简介 1、local preference公认任意属性当一条BGP路由器中存在多条去往同一目标网络的BGP路由时，BGP协议会对这些BGP路由属性进行比较，从而筛选出最佳到达目标网络的通达路径。本地优先属性，只在IBGP对等体之间…...

编程日记 2025/1/9 6:43:50

IP地址与端口号

ip地址与端口号 IP地址和端口号是网络通信中的两个重要概念，它们共同构成了网络通信的基础。 IP地址：网络世界的门牌号定义：IP地址（Internet Protocol Address）是分配给网络设备的数字标签，用于在计算机网…...

编程日记 2025/1/9 6:40:48

Fastapi + vue3 自动化测试平台（2）--日志中间件

FastAPI Vue3 自动化测试平台（2）-- 日志中间件前言在开发和运行自动化测试平台时，日志功能是至关重要的一部分。日志不仅能帮助我们快速定位和解决问题，还能作为平台运行的记录依据，为后续分析和优化提供参考。 …...

编程日记 2025/1/9 6:39:46

1. 基本数据结构 // AutoreleasePool 的基本结构 struct AutoreleasePoolPage {static pthread_key_t const key AUTORELEASE_POOL_KEY;magic_t const magic;id *next; // 指向下一个可存放对象的地址pthread_t const thread; // 所属线程AutoreleasePoolPage …...

编程日记 2025/1/9 6:38:45

1.CSS的复合选择器

1.1 什么是复合选择器在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。复合选择器可以更精准、更高效的选择目标元素（标签） 复…...

编程日记 2025/1/9 6:37:44

优质内容在个人IP运营中的重要性：以开源AI智能名片商城小程序为应用实例的深度探讨

摘要：在数字化时代，个人品牌（IP）的塑造与传播已成为各行各业提升影响力、吸引用户关注、促进商业转化的关键策略。优质内容作为连接个人IP与目标受众的桥梁，其在个人IP运营中的重要性不言而喻。本文旨在深入探讨优质内…...

编程日记 2025/1/9 6:36:43

Kafka性能测试

kafka是一个大数据消息队列（可以看做为缓存软件） 功能测试：能够读写数据性能测试：1、测试生产者每秒往kafka写入的最大吞吐量 2、测试消费者每秒从kafka里获取消息最大吞吐量硬件 3台物理机组成的kafka集群。内存121G、24…...

编程日记 2025/1/9 6:35:41

解决Docker冲突问题

错误：docker-ce-cli conflicts with 2:docker-1.13.1-210.git7d71120.el7.centos.x86_64 错误：docker-ce conflicts with 2:docker-1.13.1-210.git7d71120.el7.centos.x86_64 您可以尝试添加 --skip-broken 选项来解决该问题您可以尝试执行：…...

编程日记 2025/1/9 6:33:39

新手入门 React .tsx 项目：从零到实战

🚀 新手入门 React .tsx 项目：从零到实战 💻✨ 如果你是 React 新手，刚接触 .tsx 文件，不要担心！跟着这份指南，一步一步来，你很快就能上手了！👇 &#x1f4d…...

编程日记 2025/1/9 6:32:37

基于可信数据空间的企业数据要素与流通体系建设（附ppt 下载）

近期，可信数据空间会议召开。大数据系统软件国家工程研究中心总工程师王晨发表了题为《基于可信数据空间的企业数据要素与流通体系建设》主旨演讲。篇幅限制，部分内容如下：...

编程日记 2025/1/9 6:31:36

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2026/1/1 16:03:48

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...

编程新知 2025/12/31 3:33:31

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示最终上报fail 解决方法内核升级导致，需要在新内核下重新下载编译安装查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/12/17 0:14:52

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...

编程新知 2025/12/14 4:20:34

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/12/31 17:53:23

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。单位，以个或者次数表示。示例：…...

编程新知 2025/12/18 6:00:45

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录一、网络编程--OSI模型二、网络编程--TCP/IP模型三、网络接口四、UDP网络相关编程及主要函数编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数（接收函数） sendto函数（发送函数） 五、网络编程之 UDP 用…...

编程新知 2025/12/28 9:48:44

WebRTC调研

WebRTC是什么，为什么，如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/12/29 2:11:45

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

实现效果

知识点

WebGLRenderer（WebGL渲染器）

构造器

Scene（场景）

方法

PerspectiveCamera（透视相机）

构造器

方法

SpotLight（聚光灯）

构造器

方法

SpotLightHelper（聚光灯辅助线）

构造器

BoxGeometry（立方体几何体）

构造器

MeshPhongMaterial（网格材质）

构造器

Mesh（网格）

构造器

方法

动画函数

方法

代码

演示链接

相关文章：