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

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

news 2026/2/8 7:17:01

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...

编程新知 2025/10/27 21:25:04

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...

编程新知 2026/2/5 17:57:20

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...

编程新知 2026/1/31 15:00:15

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...

编程新知 2026/2/6 9:49:55

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

【Oracle】分区表

个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

PerspectiveCamera (透视相机)

构造器

方法

Scene (场景)

构造器

方法

AmbientLight (环境光)

构造器

DirectionalLight (方向光)

构造器

方法

TextureLoader (纹理加载器)

构造器

方法

MeshLambertMaterial (网格Lambert材质)

构造器

RingGeometry (圆环几何体)

构造器

Mesh (网格)

构造器

方法

动画

方法

示例代码

演示链接

相关文章：