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

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

news 2026/4/10 10:28:48

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

Flink技术实践-实时流中的脏数据治理

一、背景介绍在大数据实时计算领域，脏数据就像一颗定时炸弹，随时可能引爆业务系统 —— 轻则导致计算结果错误，重则引发线上故障，影响业务活动。某电商平台因订单金额字段脏数据（负数、超大值）导致实时销售…...

编程新知 2026/4/10 9:47:10

华为ensp和华三模拟器HCL-cloud安装启动软件问题

先将账号提权到管理员使非内置管理员的管理员生效华三设备启动设备关闭hyber-V通过命令关闭先进入bios，关闭系统的安全启动（Secure Boot）设置然后输入下面的命令# 禁用 Hyper-V 全量功能Disable-WindowsOptionalFeature -Online -FeatureName…...

编程新知 2026/4/10 8:58:52

保姆级教程：用深度学习项目训练环境，10分钟复现你的第一个AI项目

保姆级教程：用深度学习项目训练环境，10分钟复现你的第一个AI项目 1. 环境准备与快速部署深度学习项目训练环境镜像已经预装了完整的开发环境，包括PyTorch框架、CUDA工具包和常用Python库。这个环境特别适合想要快速开始深度学习项目的新手…...

编程新知 2026/4/10 8:07:06

在超大数据集下 DuckDB 与 MySQL 查询速度对比的

一、什么是urllib3？ urllib3 是一个用于处理 HTTP 请求和连接池的强大、用户友好的 Python 库。它可以帮助你： 发送各种 HTTP 请求（GET, POST, PUT, DELETE等）。管理连接池，提高网络请求效率。处理重试和重定向。支…...

编程新知 2026/4/10 7:01:53

DeepSeek-OCR-2实用指南：如何用AI高效处理扫描件和照片文字

DeepSeek-OCR-2实用指南：如何用AI高效处理扫描件和照片文字 1. 认识DeepSeek-OCR-2 1.1 什么是OCR技术 OCR（Optical Character Recognition）技术就像给电脑装上了一双"会读书的眼睛"。它能将图片、扫描件中的文字转换为可编辑的…...

编程新知 2026/4/10 6:41:45

restrict关键字：提升指针性能的提示

文章目录理解 restrict 关键字：提升指针性能的提示 🚀什么是 restrict 关键字？ 🤔为什么 restrict 重要？ 💡如何使用 restrict？ 🛠️代码示例：性能对比 📊Mer…...

编程新知 2026/4/10 5:56:57

【Goose】告别碎片化，开源免费的AI智能体Goose

Goose：告别碎片化的开源 AI 智能体最近试了试 Goose，一个开源的 AI 智能体项目，这里简单介绍一下吧。什么是 Goose Goose 是一个开源的 AI 智能体，现归 Linux Foundation 管理。和 Claude Code 这类产品不同，Goose 本…...

编程新知 2026/4/10 5:00:13

android java多线程传递数据方式-----使用volatile

public static volatile String is_on"yes"...

编程新知 2026/4/10 1:44:06

免疫治疗新视角：CD47 (分化簇47) 信号通路机制与药物研发技术综述

在生物制药与免疫学领域，CD47 (分化簇47) 作为连接先天免疫与适应性免疫的关键节点，近年来备受关注。作为一种广泛表达的跨膜糖蛋白，它通过复杂的信号轴调控免疫细胞的吞噬行为。本文将深入剖析CD47的作用机制、当前药物研发的临床进展以及未…...

编程新知 2026/4/10 1:15:37

HARMONYOS的@builderparam的功能及使用案例

一、@BuilderParam 核心功能（一句话总结） @BuilderParam 是 ArkTS 中用于接收 @Builder 构建函数的装饰器，作用是让父组件向子组件动态注入 UI 片段/逻辑，实现组件“插槽（slot）”能力，解耦子组件固定结构、提升复用灵活性。本质：UI 占位符，子组件只定义位置，父组件…...

编程新知 2026/4/9 23:40:02

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

实现效果

知识点

WebGLRenderer（WebGL渲染器）

构造器

Scene（场景）

方法

PerspectiveCamera（透视相机）

构造器

方法

SpotLight（聚光灯）

构造器

方法

SpotLightHelper（聚光灯辅助线）

构造器

BoxGeometry（立方体几何体）

构造器

MeshPhongMaterial（网格材质）

构造器

Mesh（网格）

构造器

方法

动画函数

方法

代码

演示链接

相关文章：