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

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

实现效果

效果

知识点

WebGLRenderer (WebGL渲染器)

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

构造器

new THREE.WebGLRenderer(parameters)

参数类型描述
parametersObject可选参数对象,用于配置渲染器。

常用参数:

  • 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)

参数类型描述
fovNumber视野角度,以度为单位。
aspectNumber相机的宽高比。
nearNumber近裁剪面距离。
farNumber远裁剪面距离。
方法
  • 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)

参数类型描述
colorColor光源颜色。
intensityNumber光源强度,默认为 1

DirectionalLight (方向光)

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

构造器

new THREE.DirectionalLight(color, intensity)

参数类型描述
colorColor光源颜色。
intensityNumber光源强度,默认为 1
方法
  • position.set(x, y, z):设置光源的位置。

TextureLoader (纹理加载器)

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

构造器

new THREE.TextureLoader(manager)

参数类型描述
managerLoadingManager加载管理器,默认为 DefaultLoadingManager
方法
  • load(url, onLoad, onProgress, onError):加载纹理贴图。
  • setCrossOrigin(value):设置跨域请求标志。

MeshLambertMaterial (网格Lambert材质)

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

构造器

new THREE.MeshLambertMaterial(parameters)

参数类型描述
parametersObject可选参数对象,用于配置材质。

常用参数:

  • color:材质颜色。
  • map:纹理贴图。
  • side:渲染面,默认为 THREE.FrontSide,可选值为 THREE.BackSideTHREE.DoubleSide

RingGeometry (圆环几何体)

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

构造器

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

参数类型描述
innerRadiusNumber内半径。
outerRadiusNumber外半径。
thetaSegmentsNumber圆周上的分段数。
phiSegmentsNumber半径上的分段数。
thetaStartNumber开始角度,以弧度为单位。
thetaLengthNumber扇形的角度,以弧度为单位。

Mesh (网格)

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

构造器

new THREE.Mesh(geometry, material)

参数类型描述
geometryGeometry几何体。
materialMaterial材质。
方法
  • 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>

演示链接

示例链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/62606.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【D3.js in Action 3 精译_044】5.1 饼图和环形图的创建(四):数据标签的添加

当前内容所在位置&#xff1a; 第五章 饼图布局与堆叠布局 ✔️ 5.1 饼图和环形图的创建 ✔️ 5.1.1 准备阶段&#xff08;一&#xff09;5.1.2 饼图布局生成器&#xff08;二&#xff09;5.1.3 圆弧的绘制&#xff08;三&#xff09; ✔️5.1.4 数据标签的添加&#xff08;四&…

java全栈day13-后端Web实战2

接上述查询部门实现&#xff0c;完成后续要求 一、统一响应结果 1.1步骤 资料如下 对一开始的代码修改如下 结果如下 1.2测试 指定请求方式 结果 小结 二、前后端联调测试 资料如下&#xff1a; (不行&#xff0c;一定要不带空格和不带中文&#xff0c;要不然启动不了试了半天…

AWS sdk for s3 - S3 client

背景 在产品环境上通过 http 的方式访问 aws s3 是不安全的&#xff0c;需要使用aws sdk 提供的接口来访问 技术实现 项目中使用的是java 1. 在gradel 中引用对应的aws 包 implementation ‘software.amazon.awssdk:s3:2.20.80’ // aws sdk implementation ‘software.am…

Android的SurfaceView和TextureView介绍

文章目录 前言一、什么是SurfaceView &#xff1f;1.1 SurfaceView 使用示例1.2 SurfaceView 源码概述1.3 SurfaceView 的构造与初始化1.4 SurfaceHolder.Callback 回调接口1.5 SurfaceView 渲染机制 二、什么是TextureView&#xff1f;2.1 TextureView 使用示例2.2 TextureVie…

vscode 排除文件夹搜索

排除的文件夹 node_modules/,dist/

优雅的@ObservedV2和@Trace装饰器

Hello&#xff0c;大家好&#xff0c;我是 V 哥。在HarmonyOS NEXT开发中&#xff0c;ObservedV2装饰器和Trace装饰器是用于状态管理的两个装饰器&#xff0c;它们在HarmonyOS应用开发中用于增强对类对象中属性的观测能力。如果你学过观察者模式的原理&#xff0c;你会更容易理…

备战蓝桥第一天 验证回文串 杨辉三角

LCR 018. 验证回文串 - 力扣&#xff08;LeetCode&#xff09; 涉及的函数&#xff1a; int isalnum ( int c ); 检查字符是否为字母数字 int tolower ( int c ); 将大写字母转换为小写 void reverse (BidirectionalIterator first, BidirectionalIterator last); 反转区域中…

【实战】提升List性能方法有几何

在内存中的 List<T> 上使用 LINQ 查询时&#xff0c;加索引并不像数据库那样有内置支持&#xff0c;但可以通过以下方式提高查询性能&#xff1a; 1. 手动构建索引 可以手动构建一个字典 (Dictionary<TKey, TValue>)&#xff0c;将需要查询的字段作为键&#xff0…

一款免费、简单、快速的JS打印插件,web 打印组件,基于JavaScript开发,支持数据分组,快速分页批量预览,打印,转pdf,移动端,PC端

前言 在数字化办公时代&#xff0c;打印需求呈现多样化和复杂化的趋势。现有的打印软件往往存在cao作繁琐、兼容性差、功能单一等问题&#xff0c;难以满足现代企业高效、灵活的打印需求。 为了解决这些痛点&#xff0c;一款简单、高效、多功能的打印插件成为了迫切需求。 介…

Python pywin32库详解

一、引言 在Python编程中&#xff0c;有时候需要与Windows操作系统进行交互&#xff0c;执行一些特定的系统操作或操作 Windows 应用程序。这时&#xff0c;pywin32库就成为了一个非常强大的工具。pywin32库提供了对Windows API的访问&#xff0c;使得Python开发者能够在Windo…

Uniapp的vue、nvue、uvue后缀名区别

在 UniApp 中&#xff0c;.vue、.nvue 和 .uvue 是不同的文件后缀名&#xff0c;每个文件格式的使用场景和兼容性略有不同。下面是每个文件后缀的详细解释以及它们的兼容性&#xff1a; 1. .vue 文件 定义&#xff1a;.vue 是标准的 Vue 单文件组件格式&#xff0c;主要用于基…

TCP/IP杂记

TCP三次握手、四次挥手 从应用角度&#xff0c;不用多考虑为什么有三次&#xff0c;遵循标准即可。 ubuntu 下 wireshark安装&#xff1a; sudo add-apt-repository universe sudo apt install wireshark 三次握手实证&#xff1a; 第一次握手的情况如下&#xff1a;&#…

Vue前端开发-接收跳转参数

路由携带参数跳转到目标页面后&#xff0c;页面组件可以接收到携带传入的参数&#xff0c;接收的方式与携带的方式相关&#xff0c;如果是采用查询字符串方式携带&#xff0c;那么可以通过路由中的query对象获取到参数&#xff0c;如果是其他方式&#xff0c;通常都是通过路由中…

力扣--LCR 177.撞色搭配

题目 整数数组 sockets 记录了一个袜子礼盒的颜色分布情况&#xff0c;其中 sockets[i] 表示该袜子的颜色编号。礼盒中除了一款撞色搭配的袜子&#xff0c;每种颜色的袜子均有两只。请设计一个程序&#xff0c;在时间复杂度 O(n)&#xff0c;空间复杂度O(1) 内找到这双撞色搭配…

[ComfyUI]批量生成图片的节点:输入一个prompt列表批量生成图像

文章目录 1.参考资料2.两个节点的部署FizzNodes节点comfyui-mixlab-nodes 生成的结果展示 1.参考资料 如何使用ComfyUI一次批量生成不同内容的图片 ComfyUI工作流】随机提示词批量出图&#xff0c;懒人刷图福音&#xff0c;根据提示 2.两个节点的部署 FizzNodes节点 fizzn…

【实操GPT-SoVits】声音克隆模型图文版教程

项目github地址&#xff1a;https://github.com/RVC-Boss/GPT-SoVITS.git官方教程&#xff1a;https://www.yuque.com/baicaigongchang1145haoyuangong/ib3g1e/tkemqe8vzhadfpeu本文旨在迅速实操GPT-SoVits项目&#xff0c;不阐述技术原理&#xff08;后期如果有时间研究&#…

5G模组AT命令脚本-关闭模组的IP过滤功能

关闭模组的IP过滤功能 关闭模组的IP过滤功能 5G 模组通常使用nat方式为 下挂设备或上位机提供上网服务&#xff0c;默认情况&#xff0c;不做NAt的包无法经由 模组转发&#xff0c;如果禁掉这个限制 &#xff0c;可使用本文中的配置命令本脚本用于关闭模组的IP过滤功能&#xf…

JAVA (Springboot) i18n国际化语言配置

JAVA i18n国际化语言配置 一、简介二、功能三、Java配置国际化步骤四、Java国际化配置工具类五、Spring Boot配置六、测试 一、简介 在Java中&#xff0c;国际化&#xff08;Internationalization&#xff0c;通常简称为i18n&#xff09;是一个过程&#xff0c;它允许应用程…

如何创建基于udp的客户端和服务端

1.先创建好udpServer.hpp、udpServer.cc、udpClient.hpp、udpClient.cc的框架。 #pragma once #include <string> #include <iostream> #include <sys/types.h> #include <sys/socket.h> #include <unistd.h> #include <cerrno> #include…

【上线文档】系统上线方案模板,计算机系统上线保障计划,系统运维信息系统运行保障方案,系统上线方案模板(Word原件)

一、项目背景和目标 二、项目需求分析 2.1 功能需求 2.2 非功能需求 三、系统设计 3.1 系统架构设计 3.2 数据库设计 3.3 接口设计 3.4 用户界面设计 四、系统开发 4.1 开发环境搭建 4.2 业务逻辑开发 4.3 数据库实现 4.4 接口实现 4.5 用户界面实现 五、系统测…