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

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

news 2025/7/2 1:47:56

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

conda相比python好处

Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理&#xff1a…...

编程新知 2025/6/15 5:36:36

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/7/1 2:36:11

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/6/21 1:28:46

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...

编程新知 2025/6/24 16:08:48

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。船舶装配过程中的挑战与需求挑战 (1…...

编程新知 2025/6/26 12:12:18

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/6/16 11:26:44

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化：从政策驱动到多元盈利政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/6/16 11:14:36

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2025/6/21 5:04:13

【UE5 C++】通过文件对话框获取选择文件的路径

目录效果步骤源码效果步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ，这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器，右键点击 .uproject 文件，选择 "Generate Visual Studio project files"，重…...

编程新知 2025/6/30 23:27:58

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后，命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2025/6/29 18:40:14

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

PerspectiveCamera (透视相机)

构造器

方法

Scene (场景)

构造器

方法

AmbientLight (环境光)

构造器

DirectionalLight (方向光)

构造器

方法

TextureLoader (纹理加载器)

构造器

方法

MeshLambertMaterial (网格Lambert材质)

构造器

RingGeometry (圆环几何体)

构造器

Mesh (网格)

构造器

方法

动画

方法

示例代码

演示链接

相关文章：