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

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

news 2025/11/13 4:49:30

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/11/12 23:46:13

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/11/12 17:22:39

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。但是&#…...

编程新知 2025/11/12 21:40:27

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2025/11/12 0:28:33

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器支持多种策略分发流量…...

编程新知 2025/11/10 5:29:14

大话软工笔记—需求分析概述

需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...

编程新知 2025/11/11 15:55:05

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/10/30 6:37:10

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

Java-41 深入浅出 Spring - 声明式事务的支持事务配置 XML模式 XML+注解模式

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/11/8 6:28:09

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题：3564. 季节性销售分析题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

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

实现效果

知识点

WebGLRenderer（WebGL渲染器）

构造器

Scene（场景）

方法

PerspectiveCamera（透视相机）

构造器

方法

SpotLight（聚光灯）

构造器

方法

SpotLightHelper（聚光灯辅助线）

构造器

BoxGeometry（立方体几何体）

构造器

MeshPhongMaterial（网格材质）

构造器

Mesh（网格）

构造器

方法

动画函数

方法

代码

演示链接

相关文章：