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

ops/2024/9/23 9:34:15/

目标

对指定路径

javascript">	[{x,y,z},{x,y,z},{x,y,z},{x,y,z}.........]

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

方法

javascript">	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}

使用

javascript">	      let path1 = explandPath(path, 30)

http://www.ppmy.cn/ops/19034.html

相关文章

kotlin 编写一个简单的天气预报app (七)使用material design

一、优化思路 对之前的天气预报的app进行了优化&#xff0c;原先的天气预报程序逻辑是这样的。 使用text和button组合了一个输入城市&#xff0c;并请求openweathermap对应数据&#xff0c;并显示的功能。 但是搜索城市的时候&#xff0c;可能会有错误&#xff0c;比如大小写…

为什么 Facebook 不使用 Git?

在编程的世界里&#xff0c;Git 就像水一样常见&#xff0c;以至于我们认为它是创建和管理代码更改的唯一可行的工具。 前 Facebook 员工&#xff0c;2024 年 首先&#xff0c;我为什么关心&#xff1f; 我致力于构建 Graphite&#xff0c;它从根本上受到 Facebook 内部工具的…

表格的单元格合并和表头的合并——vxe-table

vxe-table的官网&#xff1a;https://vxetable.cn/#/table/advanced/mergeCell在你的项目中下载安装完成后&#xff0c;先在main.js文件中引入&#xff1a; import VXETable from vxe-table import vxe-table/lib/style.css Vue.use(VXETable)一、单元格合并 效果图&#xff…

Go 学习笔记

Go 学习相关笔记 Go 官方的教学文档顺序不怎么友好&#xff0c;这里根据我自己的学习曲线来记录文档的查看顺序 基础知识 文档预备 新手先要看 Go 的模块管理介绍&#xff0c;这样才知道基础 Go 怎么导入外部包和进行本地的包管理 https://go.dev/doc/modules/managing-dep…

用例整体执行及pytest.ini文件

在我们写代码的过程中&#xff0c;一般都是右键或者命令行去执行一个用例 但是当我们写完后&#xff0c;需要整体执行一遍。那应该怎么搞呢&#xff1f; 我们可以在根目录下新建一个main.py或者run.py之类的文件&#xff0c;文件内容如下&#xff1a; if __name__ "__ma…

【iOS开发】(五)react Native路由和导航20240421-22

【iOS开发】(五)react Native 路由和导航Navigation 20240421 在&#xff08;一&#xff09;&#xff08;二&#xff09;中我们 Reactnative搭建了开发环境、学习了 基础语法、状态管理&#xff0c;JSX、组件、状态和生命周期以及样式布局等。 在&#xff08;三&#xff09;&a…

smart200 做client,modbus_tcp读取modbus_slave

这里还隐藏一个重要的设置&#xff0c;就是站地址。这个在库函数里。不同plc位置会不一样&#xff0c;我这里是vb1651对应modbus的地址为255&#xff0c;这个值我们可以自己更改&#xff0c;范围为1-247. 打开modbus_slave 软件&#xff0c;

binder 双向通信时客户端没有joinThreadPool也能接收到服务端的请求

服务端之所以能够接收到客户端的请求&#xff0c;并能正确调用服务端进程中对应服务的onTransact方法&#xff0c;是因为服务端会通过joinThreadPool或者startThreadPool&#xff0c;在里面循环的等待客户端的请求并在接收到请求之后做对应的处理。 但是今天我在用C写binder双向…