【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 时代的信息模型

模型化- 数字化转型的重要基石 在各行各业推行数字化转型过程中&#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;是一种可以显示数字和其他信息的电子设备。它的基…

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;一定及时修改 **可联系…

黑马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;初始化棋盘…

C语言(static和extern)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…

【六十四】【算法分析与设计】699. 掉落的方块,离散化操作,线段树优化,区间查询sum+区间更新update

699. 掉落的方块 在二维平面上的 x 轴上&#xff0c;放置着一些方块。 给你一个二维整数数组 positions &#xff0c;其中 positions[i] [left(i), sideLength(i)] 表示&#xff1a;第 i 个方块边长为 sideLength(i) &#xff0c;其左侧边与 x 轴上坐标点 left(i) 对齐。 每个…

vuex数据永久存续

第一步下载 vuex 并创建store下js文件 第二步 npm install vuex-persistedstate 第三步 引用 vuex-persistedstate 配置 plugins 项 import createPersistedState from vuex-persistedstateplugins:[createPersistedState({//存储方式&#xff1a;localStorage\sessionStor…

【Linux】开关机命令和服务管理类命令

一般Linux是不会经常进行关机的,关机的正确流程是: sync->shutdown->reboot->poweroff sync: 将内存中的数据同步到硬盘中poweroff: 关闭系统,等同于shutdown -h nowreboot: 重启系统,等同于 shutdown -r nowshutdown[选项] [时间] shutdown命令常见用法: shutdown:…

锂电池3.7V-4.2V降3.3V2.8V同步降压WT6015

锂电池3.7V-4.2V降3.3V2.8V同步降压WT6015 WT6015 是一款高效单片同步步降稳压器&#xff0c;采用恒定频率和电流模式架构。该设备提供可调节版本&#xff0c;适应不同的应用需求。在无负载条件下&#xff0c;其电源电流仅为40微安&#xff0c;而在关断状态下&#xff0c;电流…

类之间的关系

文章目录 一、横向关系复合&#xff08;组合&#xff09;委托&#xff08;聚合&#xff09;依赖关联 二、纵向关系&#xff08;继承&#xff09;继承下构造析构执行的顺序继承方法继承中的作用域多重继承 总结 一、横向关系 复合&#xff08;组合&#xff09; 包含与被包含黑色…