【JavaScriptthreejs】对于二维平面内的路径进行扩张或缩放

目标

对指定路径

	[{x,y,z},{x,y,z},{x,y,z},{x,y,z}.........]

沿着边缘向内或向外扩张,达到放大或缩小一定范围的效果,这里我们获取每个点(这里是Vector3(x,y,z)),获取前后两个点和当前点的坐标,计算前后两点的向量,旋转90度向内或向外,然后获取单位向量
在这里插入图片描述

方法

	import { Vector3 } from "three";export default function explandPath(points, scale) {// 初始化扩张路径点数组var expandedPath = [];// 计算扩张路径for (var i = 0; i < points.length; i++) {// 获取当前点、前一个点和后一个点var currentPoint = points[i];var previousPoint = points[(i - 1 + points.length) % points.length]; // 取余确保循环闭合var nextPoint = points[(i + 1) % points.length];// 计算相邻向量var prevVector = currentPoint.clone().sub(previousPoint).normalize(); // 当前点到前一个点的向量,并归一化var nextVector = nextPoint.clone().sub(currentPoint).normalize(); // 当前点到后一个点的向量,并归一化// 计算切线var tangent = prevVector.clone().add(nextVector).normalize(); // 相邻向量的平均值,并归一化// 沿着切线的垂直方向向外扩张一个单位长度var expansion = tangent.clone().applyAxisAngle(new Vector3(0, 0, 1), Math.PI / 2); // 以切线为轴旋转90度得到垂直方向向量expansion.multiplyScalar(scale * -1)var expandedPoint = currentPoint.clone().add(expansion); // 当前点向外扩张一个单位向量// 添加扩张点到数组中expandedPath.push(expandedPoint);}// 闭合曲线let forward = new Vector3().copy(points[points.length - 1]).sub(points[points.length - 2])forward.normalize()forward.multiplyScalar(scale)expandedPath.push(new Vector3().copy(points[points.length - 1]).add(forward))expandedPath.push(new Vector3().copy(expandedPath[0]))return expandedPath}

使用

	      let path1 = explandPath(path, 30)

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

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

相关文章

Ubuntu 安装 Harbor

一、安装 docker 原文参考传送门 1st 卸载系统自带的 docker 应用 for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done 2nd 设置Docker 的apt源 # Add Dockers official GPG key: sudo…

【AI面试】工作和面试过程中,经常遇到的其他问题汇总一(持续更新)

在与面试官在面对面进行交流的过程中,面试官不仅仅会针对简历中记录的内容进行深入的了解,还会进行一些发散性的提问。 目前也就很明显,就是要看看对方: 对于常见的问题是如何思考的?有没有在持续性的学习本领域的新知识?对于不知道的问题,是如何思考的?迁移能力咋样。…

漫谈-AI 时代的信息模型

模型化- 数字化转型的重要基石 在各行各业推行数字化转型过程中&#xff0c;构建信息化模型十分重要&#xff0c;它是数字化转型的基石。事实上&#xff0c;数字化转型的核心是“万物皆模型”&#xff0c;在工业领域&#xff0c;以德国为主导的工业4.0 发展进程中&#xff0c;…

条件编译 #和##运算符

目录 1. #运算符2. ##运算符3. 条件编译4. 题目分享总结 正文开始 前言: 本章为C语言语法完结撒花, 下文将进行C语言中#和##操作符以及条件编译的讲解, 来进一步让我们了解C语言. 作者主页: 酷酷学!!! 1. #运算符 #运算符将宏的⼀个参数转换为字符串字⾯量。它仅允许出现在带…

海外仓系统能做什么?提升仓库盈利能力,不再低效经营!

海外仓管理系统和机械设备不同&#xff0c;这句话看似有点矛盾&#xff0c;但是还真就是这么回事儿。 当机械设备出现故障的时候&#xff0c;你会明确的知道他无法运转&#xff0c;已经影响到你的生产效率了。但是海外仓系统不会&#xff0c;它看似还可以运转&#xff0c;但是…

洛基计划project loki加速器推荐 免费低延迟联机加速器分享

洛基计划project loki加速器推荐 免费低延迟联机加速器分享 《洛基计划》是一款团队PVP游戏&#xff0c;融合有动作、英雄设计、大逃杀等元素&#xff0c;由前拳头游戏、Bungie和暴雪娱乐员工创立的新工作室Theorycraft Games共同发布。《洛基计划》汇集了一些大型团队PVP游戏…

基于51单片机的数码管显示的proteus仿真

文章目录 一、数码管二、单个数码管显示0~F仿真图仿真程序 三、数码管静态显示74HC138译码器74HC245缓冲器仿真图仿真程序 四、数码管动态显示仿真图仿真程序 三、总结 一、数码管 数码管&#xff0c;也称作辉光管&#xff0c;是一种可以显示数字和其他信息的电子设备。它的基…

浅谈如何学习微信小程序

这是一篇干巴巴的文章&#xff0c;有兴趣的可以继续往下阅读。本人毕业已经三年多了&#xff0c;从实习到现在接触了java、javascript、html、vue、MySQL、jquery、微信小程序等&#xff0c;经验也算是有一点&#xff0c;感觉不多&#xff0c;属于全栈开发吧&#xff0c;本次就…

mmclassification 训练自己的数据集

文章目录 从源码安装数据集准备config文件训练附录 从源码安装 git clone https://github.com/open-mmlab/mmpretrain.git cd mmpretrain pip install -U openmim && mim install -e .下面是我使用的版本 /media/xp/data/pydoc/mmlab/mmpretrain$ pip show mmcv mmpr…

实现游戏地图读取与射击运行

射击代码来源自2D 横向对抗射击游戏&#xff08;by STF&#xff09; - CodeBus 地图读取改装自 瓦片地图编辑器 解决边界检测&#xff0c;实现使用不同像素窗口也能移动不闪退-CSDN博客 // 程序&#xff1a;2D RPG 地图编辑器改游戏读取器 // 作者&#xff1a;民用级脑的研发…

qt;lt;等xml|Html转义字符

在写Android布局文件时&#xff0c;左右尖括号<>&#xff0c;括号在XML中没办法直接使用&#xff0c;需要进行转义&#xff0c;收集一些转义符&#xff0c;以便查询使用。 常用表&#xff1a; **对于文章出现的任何问题请大家批评指出&#xff0c;一定及时修改 **可联系…

挂在Avalon总线上的AD7656芯片驱动verilog程序实现

AD7656是一款16位同步采样双极ADC转换器&#xff0c;本文中用状态机方式实现了AD7656芯片的Verilog驱动&#xff0c;并且将驱动直接挂在了altera芯片的Avalon总线上&#xff0c;使其altera芯片能够通过总线直接控制ADC芯片&#xff0c;其代码如下&#xff1a; module AD7656_d…

QT中使用QTableView控件

1.与数据库连接&#xff0c;读取数据库内容到UI界面显示 // 连接SQLite数据库db QSqlDatabase::addDatabase("QSQLITE","second");db.setDatabaseName("./testitem.db"); // 替换为你的数据库文件路径if (!db.open()) {qDebug() << &quo…

工作中常用到的一些sql脚本

– 存储过程查询&#xff08;存储过程/函数 关键词查询&#xff09; select * from pg_proc where lower(prosrc) like ‘%关键字%’; – 复制表数据 insert into 表(字段) select 字段 from 表 where 条件; – 查询重复数据 select COUNT(0),字段名 from 表名 where state …

黑马Minio(对象存储服务MinIO)

3.1 MinIO简介 MinIO基于Apache License v2.0开源协议的对象存储服务&#xff0c;可以做为云存储的解决方案用来保存海量的图片&#xff0c;视频&#xff0c;文档。由于采用Golang实现&#xff0c;服务端可以工作在Windows,Linux, OS X和FreeBSD上。配置简单&#xff0c;基本是…

Spectre-v2 以及 Linux Retpoline技术简介

文章目录 前言一、Executive Summary1.1 Spectre-v2: Branch Predictor Poisoning1.2 Mitigating Spectre-v2 with Retpolines1.3 Retpoline Concept 二、BackgroundExploit Composition 三、(Un-)Directing Speculative Execution四、Construction (x86)4.1 Speculation Barri…

线性代数基础2矩阵

矩阵是什么 矩阵就是二维数组&#xff0c;下面是一个 m 乘 n 的矩阵&#xff0c;它有 m 行&#xff0c;n 列&#xff0c;每行每列上面都有元素&#xff0c;每个元素都有行标i 和列标 j&#xff0c; a ij 。简称m n矩阵&#xff0c;记作&#xff1a; 注意a11的索引是 A[0,0]。…

路由引入,路由过滤,路由策略实验

1&#xff0c;配置IP地址 R1&#xff1a; [R1]dis ip interface brief Interface IP Address/Mask Physical Protocol GigabitEthernet0/0/0 100.1.1.1/24 up up LoopBack0 …

C语言实现扫雷游戏完整实现(上)

文章目录 前言一、新建好头文件和源文件二、实现游戏菜单选择功能三、定义游戏函数四、初始化棋盘五、 打印棋盘函数六、布置雷函数七、玩家排雷菜单八、标记功能的菜单九、标记功能菜单的实现总结 前言 C语言从新建文件到游戏菜单&#xff0c;游戏函数&#xff0c;初始化棋盘…

【免费题库】华为OD机试 - 堆内存申请(Java JS Python C C++)

须知 哈喽,本题库完全免费,收费是为了防止被爬,大家订阅专栏后可以私信联系退款。感谢支持 文章目录 须知题目描述输入描述输出描述解题思路:Java代码:JS代码:Python代码:C++代码:题目描述 有一个总空间为100字节的堆,现要从中新申请一块内存,内存分配原则为:优先…