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

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

news 2026/4/10 9:19:20

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

[具身智能-322]：词向量的含义与发展历史、趋势

词向量（Word Embedding）是自然语言处理（NLP）领域的基石技术，它的核心思想是将人类语言中的词汇转换为计算机能够理解和计算的数学形式——即稠密的低维实数向量。简单来说，词向量技术让机器不再把词语看作孤…...

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

5分钟体验MogFace：高精度人脸检测工具，支持遮挡和侧脸识别

5分钟体验MogFace：高精度人脸检测工具，支持遮挡和侧脸识别 1. 引言：为什么选择MogFace？ 想象一下这样的场景：你正在整理家庭相册，发现一张20年前的老照片，照片里的人们或侧身、或戴着帽子、或…...

编程新知 2026/4/10 7:22:40

openclaw github installation guide：标准化部署指南 3.0版本

经过多次的测试与迭代，我们终于完成了 OpenClaw 全平台私有化部署指南的最终版本。指南核心特性全平台兼容：完整覆盖 Windows、macOS、Linux 三大系统，所有步骤均在多版本环境下交叉验证，确保 100% 可复现国内网络优化&#xff1a…...

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

专业付费墙突破技术：5个高效解决方案完整指南

专业付费墙突破技术：5个高效解决方案完整指南你是否在为付费墙而烦恼？想要获取优质内容却被各种限制困扰？今天我将为你详细介绍5种专业的付费墙突破技术，帮助你在合法范围内更好地获取所需信息。本文仅用于技术研究和学习目的&am…...

编程新知 2026/4/10 6:03:11

零基础玩转GLM-OCR：单卡4090一键部署，纯文本/公式/表格全能解析

零基础玩转GLM-OCR：单卡4090一键部署，纯文本/公式/表格全能解析 1. 工具概览：你的全能文档解析助手想象一下，你手头有一堆扫描的PDF、照片或截图，里面有重要文字、复杂公式和结构化表格。传统OCR工具要么识别不准&a…...

编程新知 2026/4/10 5:53:54

SUNFLOWER MATCH LAB硬件对接：基于STM32F103C8T6最小系统板的图像采集端设计

SUNFLOWER MATCH LAB硬件对接：基于STM32F103C8T6最小系统板的图像采集端设计最近在做一个植物生长监测的项目，需要部署一批低成本的图像采集终端。核心需求很简单：定时给植物拍照，然后把照片传到云端服务器。听起来不难&#xf…...

编程新知 2026/4/10 5:51:53

基于影墨·今颜的Java面试题智能生成与解析系统

基于影墨今颜的Java面试题智能生成与解析系统面试，对于技术人来说，既是展示能力的舞台，也是一场需要精心准备的“考试”。无论是面试官绞尽脑汁设计能考察真实水平的题目，还是求职者海量刷题却不得要领，传统的面试准…...

编程新知 2026/4/10 5:45:45

PP-DocLayoutV3商业应用：银行票据+政务公文+出版古籍三场景落地案例

PP-DocLayoutV3商业应用：银行票据政务公文出版古籍三场景落地案例 1. 新一代文档布局分析引擎的价值在日常工作中，我们经常遇到各种文档处理难题：银行票据信息提取繁琐、政务公文格式复杂难解析、古籍文献数字化效率低下。传统OCR技术只能…...

编程新知 2026/4/10 3:31:11

OpenClaw技能扩展实战：千问3.5-27B驱动公众号自动发布系统

OpenClaw技能扩展实战：千问3.5-27B驱动公众号自动发布系统 1. 为什么需要自动化公众号发布作为一个技术博主，我每周都要在公众号发布2-3篇技术文章。最让我头疼的不是写作本身，而是发布前的繁琐流程：手动排版Markdown、上传图片…...

编程新知 2026/4/10 2:56:28

如果AI已经会了，我们为什么还要学？

学习从来不是为了记忆知识，而是为了建立判断力。AI 时代，记忆的价值在降，理解的价值在涨。这个问题本身藏着一个假设：学习的目的是"掌握知识"。如果这个假设成立，那确实，AI 已经把你能背的都背完…...

编程新知 2026/4/10 2:56:28

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

实现效果

知识点

WebGLRenderer（WebGL渲染器）

构造器

Scene（场景）

方法

PerspectiveCamera（透视相机）

构造器

方法

SpotLight（聚光灯）

构造器

方法

SpotLightHelper（聚光灯辅助线）

构造器

BoxGeometry（立方体几何体）

构造器

MeshPhongMaterial（网格材质）

构造器

Mesh（网格）

构造器

方法

动画函数

方法

代码

演示链接

相关文章：