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

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

news 2025/9/21 22:06: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

【力扣数据库知识手册笔记】索引

索引索引的优缺点优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...

编程新知 2025/9/21 5:09:42

【位运算】消失的两个数字（hard）

消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码题⽬链接：⾯试题 17.19. 消失的两个数字题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...

编程新知 2025/9/20 10:46:45

ESP32读取DHT11温湿度数据

芯片：ESP32 环境：Arduino 一、安装DHT11传感器库红框的库，别安装错了二、代码注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/9/11 12:55:00

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/8/4 15:55:44