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

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

news 2026/3/27 3:37:23

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

技术突破：抖音下载工具的全流程实战指南

技术突破：抖音下载工具的全流程实战指南【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容爆炸的时代，高效获取和管理短视频资源已成为创作者、研究者和普通用户的核心需求。…...

编程新知 2026/3/27 2:50:47

【基于Tube的非线性系统模型预测控制MPC】基于鲁棒控制不变集的管式模型预测控制方案及其在利普希茨非线性系统中的应用附Matlab代码

✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室👇 关注我领取海量matlab电子书和…...

编程新知 2026/3/27 1:52:35

LeagueAkari终极指南：智能游戏辅助工具快速上手与深度配置

LeagueAkari终极指南：智能游戏辅助工具快速上手与深度配置【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾在…...

编程新知 2026/3/27 1:15:57

WorkBuddy杀疯了？一群AI专家帮我打工，我在微信里当赛博虾工头！

梦瑶发自凹非寺量子位 | 公众号 QbitAI到底是谁说，给老板打工自己就当不成老板的？又是谁说，龙虾不好用、还不听使唤的？反正这些事儿，现在跟我没啥关系了。毕竟现在的我，已经转头当起了「虾工头」&#xf…...

编程新知 2026/3/27 0:37:33

RPA-Python与pytest-cinderclient集成：打造高效OpenStack Cinder测试自动化方案

RPA-Python与pytest-cinderclient集成：打造高效OpenStack Cinder测试自动化方案【免费下载链接】RPA-Python Python package for doing RPA 项目地址: https://gitcode.com/gh_mirrors/rp/RPA-Python RPA-Python作为强大的Python机器人流程自动化工具包&…...

编程新知 2026/3/26 23:41:05