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

22. Three.js案例-创建旋转的圆环面

news 2025/9/13 20:30:07

22. Three.js案例-创建旋转的圆环面

实现效果

知识点

WebGLRenderer (WebGL渲染器)

THREE.WebGLRenderer 是Three.js中最常用的渲染器，用于将场景渲染到WebGL画布上。

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置渲染器。

常用参数：

antialias：布尔值，是否开启抗锯齿，默认为 false。
canvas：HTMLCanvasElement，指定渲染器使用的画布，默认为自动创建。
context：WebGLRenderingContext，指定渲染器使用的WebGL上下文，默认为自动创建。
precision：字符串，指定着色器精度，可选值为 "low", "mediump", "highp"，默认为 "mediump"。
alpha：布尔值，是否透明，默认为 false。
premultipliedAlpha：布尔值，是否使用预乘Alpha，默认为 true。
preserveDrawingBuffer：布尔值，是否保留绘制缓冲区，默认为 false。
depth：布尔值，是否启用深度测试，默认为 true。
stencil：布尔值，是否启用模板测试，默认为 true。
logarithmicDepthBuffer：布尔值，是否启用对数深度缓冲，默认为 false。
failIfMajorPerformanceCaveat：布尔值，如果性能不佳则失败，默认为 false。

方法

setSize(width, height, updateStyle)：设置渲染器的尺寸。
setClearColor(color, alpha)：设置渲染器的背景颜色。
render(scene, camera)：渲染场景。

PerspectiveCamera (透视相机)

THREE.PerspectiveCamera 是Three.js中常用的透视相机，用于模拟人眼的透视效果。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	视野角度，以度为单位。
aspect	Number	相机的宽高比。
near	Number	近裁剪面距离。
far	Number	远裁剪面距离。

方法

position.set(x, y, z)：设置相机的位置。
lookAt(vector)：使相机看向指定的点。

Scene (场景)

THREE.Scene 是Three.js中的场景对象，用于存储所有的物体、光源和相机。

构造器

new THREE.Scene()

方法

add(object)：将物体添加到场景中。
remove(object)：从场景中移除物体。

AmbientLight (环境光)

THREE.AmbientLight 是Three.js中的环境光源，用于模拟环境光。

构造器

new THREE.AmbientLight(color, intensity)

参数	类型	描述
color	Color	光源颜色。
intensity	Number	光源强度，默认为 `1`。

DirectionalLight (方向光)

THREE.DirectionalLight 是Three.js中的方向光源，用于模拟太阳光。

构造器

new THREE.DirectionalLight(color, intensity)

参数	类型	描述
color	Color	光源颜色。
intensity	Number	光源强度，默认为 `1`。

方法

position.set(x, y, z)：设置光源的位置。

TextureLoader (纹理加载器)

THREE.TextureLoader 用于加载纹理贴图。

构造器

new THREE.TextureLoader(manager)

参数	类型	描述
manager	LoadingManager	加载管理器，默认为 `DefaultLoadingManager`。

方法

load(url, onLoad, onProgress, onError)：加载纹理贴图。
setCrossOrigin(value)：设置跨域请求标志。

MeshLambertMaterial (网格Lambert材质)

THREE.MeshLambertMaterial 是一种简单的漫反射材质，适用于不带镜面反射的表面。

构造器

new THREE.MeshLambertMaterial(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置材质。

常用参数：

color：材质颜色。
map：纹理贴图。
side：渲染面，默认为 THREE.FrontSide，可选值为 THREE.BackSide 和 THREE.DoubleSide。

RingGeometry (圆环几何体)

THREE.RingGeometry 用于创建一个圆环几何体。

构造器

new THREE.RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)

参数	类型	描述
innerRadius	Number	内半径。
outerRadius	Number	外半径。
thetaSegments	Number	圆周上的分段数。
phiSegments	Number	半径上的分段数。
thetaStart	Number	开始角度，以弧度为单位。
thetaLength	Number	扇形的角度，以弧度为单位。

Mesh (网格)

THREE.Mesh 是Three.js中的网格对象，用于将几何体和材质组合在一起。

构造器

new THREE.Mesh(geometry, material)

参数	类型	描述
geometry	Geometry	几何体。
material	Material	材质。

方法

position.set(x, y, z)：设置网格的位置。
rotation.set(x, y, z)：设置网格的旋转角度。

动画

requestAnimationFrame 用于请求浏览器在下一次重绘之前调用指定的函数。

方法

requestAnimationFrame(callback)：请求浏览器在下一次重绘之前调用指定的函数。

示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>// 创建渲染器var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);myRenderer.setClearColor('white', 1.0);$("#myContainer").append(myRenderer.domElement);// 创建相机var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 创建场景var myScene = new THREE.Scene();// 添加环境光myScene.add(new THREE.AmbientLight('yellow'));// 添加方向光var myLight = new THREE.DirectionalLight('white');myLight.position.set(0, 1, 0);myScene.add(myLight);// 加载纹理贴图var myMap = new THREE.TextureLoader().load("images/img006.jpg");myMap.wrapS = myMap.wrapT = THREE.RepeatWrapping;myMap.anisotropy = 16;// 创建材质var myMaterial = new THREE.MeshLambertMaterial({map: myMap,side: THREE.DoubleSide});// 创建圆环几何体var myGeometry = new THREE.RingGeometry(40, 180, 1000);// 创建网格var myMesh = new THREE.Mesh(myGeometry, myMaterial);myMesh.position.set(0, 0, 0);myScene.add(myMesh);// 渲染圆环面animate();function animate() {requestAnimationFrame(animate);var myTimer = Date.now() * 0.0001;myCamera.position.x = Math.cos(myTimer) * 400;myCamera.position.y = Math.cos(myTimer) * 400;myCamera.position.z = Math.sin(myTimer) * 400;myCamera.lookAt(myScene.position);myMesh.rotation.x = myTimer * 5;myMesh.rotation.y = myTimer * 3;myMesh.rotation.z = myTimer * 2;myRenderer.render(myScene, myCamera);}
</script>
</body>
</html>

演示链接

示例链接

22. Three.js案例-创建旋转的圆环面

22. Three.js案例-创建旋转的圆环面实现效果知识点 WebGLRenderer (WebGL渲染器) THREE.WebGLRenderer 是Three.js中最常用的渲染器，用于将场景渲染到WebGL画布上。构造器 new THREE.WebGLRenderer(parameters) 参数类型描述parametersObject可选参数对象&…...

编程日记 2024/12/11 13:15:23

Elasticsearch：使用阿里 infererence API 及 semantic text 进行向量搜索

在之前的文章 “Elasticsearch 开放推理 API 新增阿里云 AI 搜索支持”，它详细描述了如何使用 Elastic inference API 来针对阿里的密集向量模型，稀疏向量模型， 重新排名及 completion 进行展示。在那篇文章里，它使用了很多的英文…...

编程日记 2024/12/11 13:14:22

Linux WEB服务器的部署及优化

1.用户常用关于web的信息 1.1.什么是www www是world wide web的缩写，及万维网，也就是全球信息广播的意思。通常说的上网就是使用www来查询用户所需要的信息。 www可以结合文字、图形、影像以及声音等多媒体，超链接的方式将信息以Internet…...

编程日记 2024/12/11 13:11:19

人工智能大模型LLM开源资源汇总（持续更新）

说明目前是大范围整理阶段，所以存在大量机翻说明，后续会逐渐补充和完善资料，减少机翻并增加说明。 Github上的汇总资源（大部分英文） awesome-production-machine-learning 此存储库包含一系列精选的优秀开源库&am…...

编程日记 2024/12/11 13:08:16

目标跟踪算法：SORT、卡尔曼滤波、匈牙利算法

目录 1 目标检测 2 卡尔曼滤波 3《从放弃到精通！卡尔曼滤波从理论到实践》视频简单学习笔记 3.1 入门 3.2 进阶 3.2.1 状态空间表达式 3.2.2 高斯分布 3.3 放弃 3.4 精通 4 匈牙利算法 5 《【运筹学】-指派问题（匈牙利算法）》视…...

编程日记 2024/12/11 13:05:13

Java版-图论-拓扑排序与有向无环图

拓扑排序拓扑排序说明对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序，是将G中所有顶点排成一个线性序列，使得图中任意一对顶点u和v，若边<u,v>∈E(G)，则u在线性序列中出现在v之前。通常，这样的线性序列称为满足拓扑次序(Topological Order)的序列…...

编程日记 2024/12/11 13:00:09

GTC2024 回顾 | 优阅达携手 HubSpot 亮相上海，赋能企业数字营销与全球业务增长

从初创企业入门到成长型企业拓展，再到 AI 驱动智能化运营，HubSpot 为企业的每步成长提供了全方位支持。 2024 年 11 月下旬，备受瞩目的 GTC2024 全球流量大会（上海）成功举办。本次大会汇聚了全国内多家跨境出海领域企业…...

编程日记 2024/12/11 12:54:01

eclipse启动的时候，之前一切很正常，但突然报Reason: Failed to determine a suitable driver class的解决

1、之前项目都是启动正常的，然后运行以后发现启动不了了，还会报错： 2、这个Reason: Failed to determine a suitable driver class，说是没有合适的驱动class spring:datasource:url: jdbc:sqlserver://192.168.1.101:1433;databa…...

编程日记 2024/12/11 12:52:59

_tkinter.TclError: can‘t find package tkdnd Unable to load tkdnd library.解决办法

Traceback (most recent call last): File “tkinterdnd2\TkinterDnD.py”, line 55, in _require _tkinter.TclError: can’t find package tkdnd During handling of the above exception, another exception occurred: Traceback (most recent call last): File “1.导入总表…...

编程日记 2024/12/11 12:48:54

VBA高级应用30例应用在Excel中的ListObject对象：向表中添加注释

《VBA高级应用30例》（版权10178985），是我推出的第十套教程，教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开，这套教程案例与理论结合，紧贴“实战”，并做“战术总结”，以…...

编程日记 2024/12/11 12:46:51

folly库Conv类型转换源码解析

1，普通类型转换例子1： bool boolV = true;EXPECT_EQ(to<bool>(boolV), true);int intV = 42;EXPECT_EQ(to<int>(intV), 42);float floatV = 4.2f;EXPECT_EQ(to<float>(floatV), 4.2f);double doubleV = 0.42;EXPECT_EQ(to<double>(doubleV), 0.42)…...

编程日记 2024/12/11 12:44:48

UE4 骨骼网格体合并及规范

实现代码 // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "SkeletalMeshMerge.h" #include "Kismet/BlueprintFunctionLibrary.h" #include "AceMeshCom…...

编程日记 2024/12/11 12:42:46

Java版企业电子招标采购系统源业码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

功能描述 1、门户管理：所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含：招标公告、非招标公告、系统通知、政策法规。 2、立项管理：企业用户可对需要采购的项目进行立项申请，并提交审批，查看所…...

编程日记 2024/12/11 12:40:43

通过源码⼀步⼀步分析 ArrayList 扩容机制

ArrayList 是 Java 中常用的集合类，它底层实现是基于数组的。为了处理元素的动态增加，ArrayList 会在容量不足时进行扩容。以下是通过源码逐步分析 ArrayList 扩容机制的过程。 1. ArrayList 类的基本结构 ArrayList 继承自 AbstractList，实…...

编程日记 2024/12/11 12:36:40

源码分析之Openlayers中默认Controls控件渲染原理

概述 Openlayers 中默认的三类控件是Zoom、Rotate和Attribution 源码分析 defaults方法 Openlayers 默认控件的集成封装在defaults方法中，该方法会返回一个Collection的实例，Collection是一个基于数组封装了一些方法，主要涉及到数组项的添…...

编程日记 2024/12/11 12:31:35

中间件的分类与实践：从消息到缓存

目录一. 中间件的基本概念二. 中间件的主要类型 （1）消息中间件（Message-Oriented Middleware, MOM）： （2）数据库中间件： （3）Web中间件： &a…...

编程日记 2024/12/11 12:30:34

京东e卡 h5st 4.96

声明: 本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 有相关问题请第一时间头像私信联系我删…...

编程日记 2024/12/11 12:28:31

《CSS 知识点》滚动条仅在 hover 时才显示（宽度不改变）

很简单！ 滚动条的滑动小方块背景色默认透明，仅在hover时设置背景色； 滚动条的轨道背景色默认透明，仅在hover时设置背景色； /*滚动条的滑动小方块*/ ::-webkit-scrollbar-thumb {background: transparent; } /*hover…...

编程日记 2024/12/11 12:26:29

手里有病理切片+单细胞测序的数据，如何开展医工交叉的研究？

小罗碎碎念这一期推文研究一个问题：病理如何与单细胞结合？ 病理与单细胞的结合，时常出现在今年的各大顶刊中。关于这一领域的研究，其实19年就开始了。我把部分低质量的文献做了剔除，但是也基本能反应这一领域的受关注…...

编程日记 2024/12/11 12:20:22

力矩扭矩传感器介绍

在机械臂（机器人臂）末端使用的力矩扭矩传感器主要用于测量机械臂末端执行器（例如机械手爪、抓取装置等）所受的扭矩和力。这些传感器对机械臂的控制系统至关重要，能够提供精确的力反馈信息，帮助实现更高效、…...

编程日记 2024/12/11 12:18:19

铭豹扩展坞 USB转网口突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因：背景：一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/9/13 15:21:48

JavaSec-RCE

简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/9/13 20:02:17

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2025/9/12 18:19:00

VTK如何让部分单位不可见

最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...

编程新知 2025/9/3 21:03:21

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...

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

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/9/9 23:11:34

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...

编程新知 2025/9/7 8:49:35

Leetcode33（搜索旋转排序数组）

题目表述整数数组 nums 按升序排列，数组中的值互不相同。在传递给函数之前，nums 在预先未知的某个下标 k（0 < k < nums.length）上进行了旋转，使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/7/6 1:54:27

22. Three.js案例-创建旋转的圆环面

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

PerspectiveCamera (透视相机)

构造器

方法

Scene (场景)

构造器

方法

AmbientLight (环境光)

构造器

DirectionalLight (方向光)

构造器

方法

TextureLoader (纹理加载器)

构造器

方法

MeshLambertMaterial (网格Lambert材质)

构造器

RingGeometry (圆环几何体)

构造器

Mesh (网格)

构造器

方法

动画

方法

示例代码

演示链接

相关文章：