28. Three.js案例-创建圆角矩形并进行拉伸
28. Three.js案例-创建圆角矩形并进行拉伸
实现效果
知识点
WebGLRenderer (WebGL渲染器)
WebGLRenderer
是 Three.js 中用于渲染 3D 场景的主要渲染器。
构造器
WebGLRenderer( parameters : Object )
参数 | 类型 | 描述 |
---|---|---|
parameters | Object | 渲染器的配置参数,可选。 |
常用参数:
antialias
:布尔值,是否开启抗锯齿,默认为false
。alpha
:布尔值,是否允许透明,默认为false
。precision
:字符串,指定着色器的精度,可选值为low
,medium
,high
。
方法
setSize(width, height)
: 设置渲染器的尺寸。setClearColor(color, alpha)
: 设置渲染器的背景颜色和透明度。
PerspectiveCamera (透视相机)
PerspectiveCamera
是 Three.js 中用于创建透视投影相机的对象。
构造器
PerspectiveCamera(fov, aspect, near, far)
参数 | 类型 | 描述 |
---|---|---|
fov | Number | 视野角度,单位为度。 |
aspect | Number | 相机的宽高比。 |
near | Number | 近裁剪面距离。 |
far | Number | 远裁剪面距离。 |
方法
position.set(x, y, z)
: 设置相机的位置。lookAt(vector)
: 设置相机的朝向。
Scene (场景)
Scene
是 Three.js 中用于存储和管理所有 3D 对象的容器。
构造器
Scene()
方法
add(object)
: 向场景中添加对象。remove(object)
: 从场景中移除对象。
PointLight (点光源)
PointLight
是 Three.js 中用于创建点光源的对象。
构造器
PointLight(color, intensity, distance, decay)
参数 | 类型 | 描述 |
---|---|---|
color | Color | 光源的颜色。 |
intensity | Number | 光源的强度,默认为 1 。 |
distance | Number | 光源的最大影响距离,默认为 0 ,表示无限远。 |
decay | Number | 光源的衰减系数,默认为 1 。 |
方法
position.set(x, y, z)
: 设置光源的位置。
Shape (形状)
Shape
是 Three.js 中用于创建自定义 2D 形状的对象。
构造器
Shape(points)
参数 | 类型 | 描述 |
---|---|---|
points | Array | 一系列 Vector2 点,用于定义形状的轮廓。 |
方法
moveTo(x, y)
: 移动到指定点。lineTo(x, y)
: 从当前点画直线到指定点。quadraticCurveTo(cpx, cpy, x, y)
: 从当前点画二次贝塞尔曲线到指定点。
ExtrudeGeometry (拉伸几何体)
ExtrudeGeometry
是 Three.js 中用于创建拉伸几何体的对象。
构造器
ExtrudeGeometry(shape, options)
参数 | 类型 | 描述 |
---|---|---|
shape | Shape | 要拉伸的 2D 形状。 |
options | Object | 拉伸选项,可选。 |
常用选项:
depth
: 拉伸深度,默认为100
。bevelEnabled
: 是否启用倒角,默认为true
。bevelThickness
: 倒角厚度,默认为6
。bevelSize
: 倒角大小,默认为1
。bevelOffset
: 倒角偏移,默认为0
。bevelSegments
: 倒角段数,默认为1
。extrudePath
: 拉伸路径,可以是一个Curve
对象。
Mesh (网格)
Mesh
是 Three.js 中用于创建网格对象的类。
构造器
Mesh(geometry, material)
参数 | 类型 | 描述 |
---|---|---|
geometry | Geometry | 网格的几何体。 |
material | Material | 网格的材质。 |
方法
translateX(amount)
: 沿 X 轴移动指定距离。translateY(amount)
: 沿 Y 轴移动指定距离。translateZ(amount)
: 沿 Z 轴移动指定距离。scale.set(x, y, z)
: 设置网格的缩放比例。
MeshPhongMaterial (网格Phong材质)
MeshPhongMaterial
是 Three.js 中用于创建 Phong 着色材质的对象。
构造器
MeshPhongMaterial(parameters)
参数 | 类型 | 描述 |
---|---|---|
parameters | Object | 材质的配置参数,可选。 |
常用参数:
color
: 材质的颜色。specular
: 高光颜色,默认为0x111111
。shininess
: 高光强度,默认为30
。
OrbitControls (轨道控制器)
OrbitControls
是 Three.js 中用于控制相机旋转、缩放和平移的控制器。
构造器
OrbitControls(camera, domElement)
参数 | 类型 | 描述 |
---|---|---|
camera | Camera | 控制的相机对象。 |
domElement | DOMElement | 控制器绑定的 DOM 元素。 |
方法
update()
: 更新控制器状态。
代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script><script src="ThreeJS/OrbitControls.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, 1, 1, 1000);myCamera.position.set(200, 200, 200);myCamera.lookAt({x: 0, y: 0, z: 0});// 创建场景var myScene = new THREE.Scene();// 创建点光源var myPointLight = new THREE.PointLight('white');myPointLight.position.set(320, 200, 400);myScene.add(myPointLight);// 创建圆角矩形var myShape = new THREE.Shape();var x = 0, y = 0, myWidth = 30, myHeight = 40, myRadius = 6;myShape.moveTo(x, y + myRadius);myShape.lineTo(x, y + myHeight - myRadius);myShape.quadraticCurveTo(x, y + myHeight, x + myRadius, y + myHeight);myShape.lineTo(x + myWidth - myRadius, y + myHeight);myShape.quadraticCurveTo(x + myWidth, y + myHeight, x + myWidth, y + myHeight - myRadius);myShape.lineTo(x + myWidth, y + myRadius);myShape.quadraticCurveTo(x + myWidth, y, x + myWidth - myRadius, y);myShape.lineTo(x + myRadius, y);myShape.quadraticCurveTo(x, y, x, y + myRadius);// 设置拉伸圆角矩形的路径var myCurve = new THREE.CatmullRomCurve3([new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 30, 0)]);// 创建拉伸之后的圆角矩形var myGeometry = new THREE.ExtrudeGeometry(myShape, {extrudePath: myCurve});var myMaterial = new THREE.MeshPhongMaterial({color: 'cyan'});var myMesh = new THREE.Mesh(myGeometry, myMaterial);myMesh.translateX(100);myMesh.translateZ(100);myMesh.translateY(0);myScene.add(myMesh);// 渲染圆角矩形animate();var step = 0;function animate() {myRenderer.render(myScene, myCamera);step = step + 0.01;var myScale = 2 * Math.sin(step) + 2;myMesh.scale.y = myScale;myMesh.scale.x = 2;myMesh.scale.z = 2;requestAnimationFrame(animate);}// 创建轨道控制器var myOrbitControls = new THREE.OrbitControls(myCamera);
</script>
</body>
</html>
演示链接
示例链接
相关文章:
28. Three.js案例-创建圆角矩形并进行拉伸
28. Three.js案例-创建圆角矩形并进行拉伸 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。 构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数,可选。 …...
最佳实践:编写和配置 Stylelint 自定义插件,Stylelint 自定义规则
前言 在前端开发中,代码质量和一致性是至关重要的。Stylelint 作为一个强大的 CSS 代码检查工具,能够帮助开发者发现代码中的问题,并保持代码风格的一致性。然而,内置的规则和插件有时无法完全满足特定项目的需求。在这种情况下&…...
vscode借助插件调试OpenFoam的正确的.vscode配置文件
正确的备份文件位置: /home/jie/桌面/理解openfoam/正确的调试爆轰单进程案例/mydebugblastFoam 调试爆轰案例流体 并且工作区和用户区都是openfoam-7版本 问题:F5以debug模式启动后不停在断点 解决方法: 这里备份一下.vsode正确的配置&…...
Towards Frame Rate Agnostic Multi-object Tracking—迈向帧率无关的多目标跟踪
Towards Frame Rate Agnostic Multi-object Tracking—迈向帧率无关的多目标跟踪 发表在IJCV 2023年 作者:Weitao Feng, Lei Bai, Yongqiang Yao, Fengwei Yu & Wanli Ouyang 研究目标:多目标跟踪的帧率无关性研究 IJCV 在计算机视觉领域的影响力非常…...
视频网站中重磅推荐模块(附加源码)
写在开头 上期代码主要实现省市区三级联动效果,开发久了很多功能都是通过框架组件库来完成,但是如果组件满足不了开发需求,还需要开发人员手动封装组件,专门出这样一期文章,通过原生js实现一些特定功能,功能…...
Flink keyBy算子的分区规则
demo代码 String worlds "flink,spark,hadoop,zk,kafka";streamSource.flatMap(new RichFlatMapFunction<String, String>() {Overridepublic void flatMap(String value, Collector<String> collector) throws Exception {String[] worlds value.spl…...
jvm内存优化方式
1. JVM(Java Virtual Machine): • 定义:Java虚拟机,是运行Java字节码的抽象计算机。 • 内存管理:负责内存的分配和回收,是JVM内存优化的核心。 2. 堆(Heap):…...
顺序表的实现
大家好,今天给大家分享一下最基础的数据结构--顺序表的实现,其实顺序表与我们的数组相似,但是顺序表存储数据必须是连续的,不能像数组一样存储在任意下标,那么我们就来看看顺序表的代码。 SeqList.h SeqList.c 那么今…...
优化Go语言中的网络连接:设置代理超时参数
网络连接优化的重要性 在分布式系统和微服务架构中,网络请求的效率直接影响到整个系统的响应速度。合理的超时设置可以防止系统在等待网络响应时陷入无限期的阻塞,从而提高系统的吞吐量和用户体验。特别是在使用代理服务器时,由于增加了网络…...
活动|华院计算董事长宣晓华出席第十五届田长霖论坛会议
12月11日,2024年光谷田长霖中心科技文化交流大会暨第十五届田长霖论坛会议举行,300多位院士专家、大学校长、青年学者和优秀企业家齐聚光谷。 华院计算技术(上海)股份有限公司(以下简称“华院计算”)创始人…...
qt-C++语法笔记之mapToGlobal将组件(控件)中的本地坐标系(局部坐标)映射到全局坐标系
qt-C语法笔记之mapToGlobal将组件(控件)中的本地坐标系(局部坐标)映射到全局坐标系 code review! 文章目录 qt-C语法笔记之mapToGlobal将组件(控件)中的本地坐标系(局部坐标)映射到…...
设计一个高效的Java多线程应用程序及案例
《剑来》 勇敢追梦:“如果真的有那么喜欢苏姑娘,既然这辈子到最后也没能说出口喜欢她,没关系,以后数十年百余年,哪怕找遍人间,你都要去再见她一次,大声告诉她,自己喜欢她。” 正视困…...
基于最新的Apache StreamPark搭建指南
一、StreamPark 的介绍 官方文档:Apache StreamPark (incubating) | Apache StreamPark (incubating) 中文文档:Apache StreamPark (incubating) | Apache StreamPark (incubating)Github地址:https://github.com/apache/incubator-streampark Apache StreamPark™ 是一个…...
迎接全新的 Kotlin 支持 – K2 模式:基本信息
K2 模式有什么作用? K2 模式是 IntelliJ IDEA 中 Kotlin 支持的新实现,它可以提高 IDE 的稳定性,同时也会为支持未来 Kotlin 语言功能奠定基础。 K2 模式与 Kotlin K2 编译器有什么区别? K2 编译器负责编译 Kotlin 语言 2.0 或…...
阿里云元宇宙
在数字经济时代,技术的迅猛发展带来了前所未有的机遇与挑战,元宇宙正逐步成为全球科技与商业创新的热点。作为中国云计算和人工智能领域的领导者,阿里云通过其强大的技术能力,推出了全面的阿里云元宇宙解决方案,为全球…...
题目 1688: 数据结构-字符串插入
第一种方式字符串 #include<iostream> #include<cstring> #include<algorithm> using namespace std; int main(){string s1,s2;int n;cin>>s1>>s2>>n;s1.insert(n-1,s2);cout<<s1<<endl;return 0; } 第二种方式字符数组 …...
MetaGPT中的教程助手:TutorialAssistant
1. 提示词 COMMON_PROMPT """ You are now a seasoned technical professional in the field of the internet. We need you to write a technical tutorial with the topic "{topic}". """DIRECTORY_PROMPT (COMMON_PROMPT "…...
如何将Python程序打包发布,实现一键安装
哈喽,大家好,我是木头左! 编写完Python脚本后,如何将其高效地发布并安装到其他计算机上,。本文将详细介绍如何将Python程序打包发布,实现一键安装,让程序的分发与部署变得轻松便捷。 一、准备工作 1. 编写和测试程序 在开始打包之前,首先要确保你的Python程序已经编…...
Java 接口
1. 接口概述 (1) Java提供了一个关键字 interface,用这个关键字可以定义接口; (2)格式: public interface 接口名{ //成员变量(常量) //成员方法(抽象方法) } public interface A {//成员变量(接口默认为常量-public static final)String NA…...
RTMP推流平台EasyDSS在无人机推流直播安防监控中的创新应用
无人机与低空经济的关系密切,并且正在快速发展。2024年中国低空经济行业市场规模达到5800亿元,其中低空制造产业占整个低空经济产业的88%。预计未来五年复合增速将达到16.03%。 随着科技的飞速发展,公共安防关乎每一个市民的生命财产安全。在…...
【Flutter_Web】Flutter编译Web第一篇(插件篇):Flutter_web实现上传TOS上传资源,编写web插件
前言 由于Flutter在双端的开发体验几乎接近的情况下,尝试将Flutter代码转Web端进行部署和发布,在其中遇到的所有问题,我都会通过这种方式分享出来。那么第一个要解决的就是上传资源到TOS上,在双端中都是通过插件的方式在各端通过…...
SpringBoot 项目使用 EasyExcel 插件构建 Excel 表格格式(行高、列宽和字体等)工具类
本文主要讲了如何使用 EasyExcel 插件,在导出 Excel 时,设置行高,列宽,表头格式,内容字体大小等工具类。 1、代码使用的依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyex…...
数据优化带来的问题
原因大概可以猜到 等待进一步深究(必须一个是浮点型) double x 1 / 2;double x2 static_cast<double> (1 / 2);double x3 (double)1 / (double)2;double x4 (double)1 / 2;double x5 1 / (double)2;double nTotalDataCount 78182;double n…...
2024153读书笔记|《春烂漫:新平摄影作品选》——跳绳酷似人生路,起落平常,进退平常,莫惧征途万里长
2024153读书笔记|《春烂漫:新平摄影作品选》——跳绳酷似人生路,起落平常,进退平常,莫惧征途万里长 《春烂漫:新平摄影作品选》作者新平,2019.12.25年读完的小书,当时就觉得挺不错,今…...
RabbitMQ个人理解与基本使用
目录 一. 作用: 二. RabbitMQ的5中队列模式: 1. 简单模式 2. Work模式 3. 发布/订阅模式 4. 路由模式 5. 主题模式 三. 消息持久化: 消息过期时间 ACK应答 四. 同步接收和异步接收: 应用场景 五. 基本使用 ÿ…...
每天40分玩转Django:Django视图和URL
Django视图和URL 一、课程概述 学习项目具体内容预计用时视图基础函数视图、类视图、视图装饰器90分钟URL配置URL模式、路由系统、命名URL60分钟请求处理请求对象、响应对象、中间件90分钟 二、视图基础 2.1 函数视图 # blog/views.py from django.shortcuts import render…...
ModbusTcp获取数据
ModbusTcp获取数据 记录一个用 pymodbus 库来获取数据的代码。 注意: 1.读取寄存器地址是16进制的。2.大小端转换通过代码知道原理。读取数据时,切记频率别太高,否则会出现连接被关闭问题。 from pymodbus.client.sync import ModbusTcpCli…...
汽车车牌识别数据集,支持YOLO,COCO,VOC格式的标注,8493张图片,可识别多种环境下的车牌
汽车车牌识别数据集,支持YOLO,COCO,VOC格式的标注,8493张图片,可识别多种环境下的车牌 数据集分割 训练组82% 6994图片 有效集12% 999图片 测试集6% 500图片 预处理 自动…...
YOLOv5+pyqt5+摄像头在特定条件下进行目标检测并采集原始数据
项目介绍 项目地址 GitHub - biabu0/Yolov5_D435i: 通过YOLOV5与pyqt5实现一个使用D435i深度摄像头采集特定需求与场景下的深度数据的小程序 通过YOLOV5对指定的区域进行检测,当检测到目标进入特定区域时,开始保存数据,摄像头采用D435i深度…...
代码随想录-算法训练营-番外(图论02:岛屿数量,岛屿的最大面积)
day02 图论part02 今日任务:岛屿数量,岛屿的最大面积 都是一个模子套出来的 https://programmercarl.com/kamacoder/0099.岛屿的数量深搜.html#思路往日任务: day01 图论part01 今日任务:图论理论基础/所有可到达的路径 代码随想录图论视频部分还没更新 https://programmercar…...
C# 23种设计模式(3)工厂(SimpleFactory)模式
一、工厂模式介绍 工厂模式(Factory Pattern)是一种在软件开发中常用的创建型设计模式。它的主要目的是将对象的创建逻辑与使用逻辑分离,使得增加新的对象类型时不需要修改使用对象的代码。这样做提高了系统的可扩展性和可维护性。 工厂模式…...
安卓主板_MTK联发科android主板方案
在当前智能设备的发展中,安卓主板的配置灵活性和性能优化显得尤为重要。安卓主板的联发科方案,在芯片上,搭载联发科MTK6761、MT8766、MT6765、MT6762、MT8768、MT8390、MTK8370以及MT8788等型号,均基于64位的四核或八核架构设计。…...
中企出海 - 平行账 - Parallel Ledger
以中国企业出海美国,为同时满足中国和美国的会计核算要求,请给出SAP 平行账的实施方案及国家科目表(alternative account)实施海外国家的注意事项 中国企业在美国开展业务需同时满足中国和美国的会计准则,这通常包括《中国企业会计准则》&am…...
Pyside6 --Qt设计师--简单了解各个控件的作用之:Item Views
目录 一、List View二、Tree View三、Table View四、Column View 一、List View 学习方法和Buttons一样,大家自己在qt设计师上面在属性编辑区进行相应的学习! 我就先紧着qt设计师的页面进行讲解,部分内容查自AI。 后面有什么好用的控件或者…...
智能家居WTR096-16S录放音芯片方案,实现语音播报提示及录音留言功能
前言: 在当今社会的高速运转之下,夜幕低垂之时,许多辛勤工作的父母尚未归家。对于肩负家庭责任的他们而言,确保孩童按时用餐与居家安全成为心头大事。此时,家居留言录音提示功能应运而生,恰似家中的一位无形…...
算法2(蓝桥杯19)-合并两个有序链表
问题:将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 解题思路: 创建一个虚拟节点,循环比较l1、l2链表各节点的大小,将较小的节点追加到虚拟节点后,返回新链表 1、…...
OpenAI 正式赋予 ChatGPT 通过视频实时与用户互动的能力
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
【Email】基于SpringBoot3.4.x集成发送邮件功能
【Email】基于SpringBoot3.4.x集成发送邮件功能 摘要本地开发环境说明pom.xml启动类application.yaml写一个邮件模板定义模板引擎工具类定义一个邮件发送对象封装一个邮件发送器单元测试邮件模板单元测试发送邮件单元测试 邮件效果参考资料 摘要 在业务系统开发过程中…...
debian12学习笔记
前置条件 基于debian12官网的qcow2格式文件进行操作 安装ssh 登录虚拟机后安装ssh服务端 apt install openssh-server配置国内源 新增/etc/apt/sources.list.d/tsinghua.list 使用清华大学的源 https://www.cnblogs.com/shanhubei/p/18104430 deb https://mirrors.tuna.t…...
(补)算法刷题Day16:BM39 序列化二叉树
题目链接 描述 思路: 自行序列化和反序列化。元素用逗号分隔。 序列化: 使用队列层序遍历。遍历每一层节点,并访问其左右孩子,如果是空则序列化成#,如果是数字,则序列化成str。 反序列化: 使…...
科研绘图系列:R语言绘制热图和散点图以及箱线图(pheatmap, scatterplot boxplot)
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载图1图2图3系统信息参考介绍 R语言绘制热图和散点图以及箱线图(pheatmap, scatterplot & boxplot) 加载R包 library(magrittr) library(dplyr) library(ve…...
docker 安装mysql 5.7 详细保姆级教程
1. 安装mysql(5.7) docker pull mysql:5.7 若是拉取不了,可以配置下 docker 源 2. 查看是否安装成功 docker images 下图就是成功了 3.创建mysql专用目录、数据挂载目录、配置文件目录 ,演示目录在于/home/下 //命令逐条执行cd /home/ mkdir mysql …...
PostgreSql
PostgreSql 1.物化视图1.1 创建物化视图1.2 查询物化视图1.3 使用物化视图1.4 刷新物化视图1.5 删除物化视图 1.物化视图 物化视图是一种存储查询结果的数据库对象。与普通视图不同,物化视图将查询结果实际存储在磁盘上,而不是在每次查询时动态计算结果…...
优化移动端H5:常见问题与解决方案
移动端H5开发中的“坑”与解决方案 本文介绍了开发中遇到的几个关于移动端H5开发中的小问题,以及解决的方法。 一、iOS滑动不流畅问题 在iOS设备上,H5页面的滑动效果有时会出现不流畅的情况,特别是在页面高度超过一屏时。这通常是由于iOS的…...
AWS Glue实现RDS到RDS的数据同步
使用 在AWS上,AWS Glue 是一个完全托管的ETL(Extract, Transform, Load)服务,可以轻松地将数据从一个源系统提取出来,转换数据格式,然后将其加载到目标系统。本文将详细介绍如何使用AWS Glue将数据从一个RDS(关系型数据库服务)实例同步到另一个RDS实例,而无需手动编写…...
【Redis】Redis缓存击穿
1. 概述 缓存击穿:缓存击穿问题也叫热点key问题,一个高并发的key或重建缓存耗时长(复杂)的key失效了,此时大量的请求给数据库造成巨大的压力。如下图,线程1还在构建缓存时,线程2,3&…...
QILSTE H8-316QFO高亮橙光LED灯珠 发光二极管LED
在当今电子技术领域,H8-316QFO型号的LED以其卓越的性能和可靠性 脱颖而出。本文将深入探讨这款LED的关键参数,以期为工程师和技术人员提供详尽的技术参考。 首先,H8-316QFO的物理特性不容忽视。其外观尺寸为3.2x1.5x0.8mm,小巧的…...
pytest入门三:setup、teardown
https://zhuanlan.zhihu.com/p/623447031 function对应类外的函数,每个函数调用一次 import pytest def setup_module():print(开始 module)def teardown_module():print(结束 module)def setup_function():print(开始 function)def teardown_function():print(结…...
MySQL有哪些高可用方案?
大家好,我是锋哥。今天分享关于【MySQL有哪些高可用方案?】面试题。希望对大家有帮助; MySQL有哪些高可用方案? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MySQL 高可用方案旨在确保数据库系统的高可靠性、低宕机时间、以及在硬件故障…...
IT 行业的就业情况
当前,IT 行业的就业情况呈现出以下特点: 1. 需求持续增长:随着数字化转型的加速,各个行业对信息技术的依赖程度不断提高,推动了对 IT 人才的持续需求。特别是在云计算、大数据、人工智能、物联网等新兴领域ÿ…...