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

news2024/10/6 5:58:42

目标

对指定路径

	[
		{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.coloradmin.cn/o/1619272.html

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

相关文章

AJAX——案例

1.商品分类 需求&#xff1a;尽可能同时展示所有商品分类到页面上 步骤&#xff1a; 获取所有的一级分类数据遍历id&#xff0c;创建获取二级分类请求合并所有二级分类Promise对象等待同时成功后&#xff0c;渲染页面 index.html代码 <!DOCTYPE html> <html lang&qu…

【数据库】MongoDB

文章目录 [toc]数据库操作查询数据库切换数据库查询当前数据库删除数据库查询数据库版本 数据集合操作创建数据集合查询数据集合删除数据集合 数据插入插入id重复的数据 数据更新数据更新一条丢失其他字段保留其他字段 数据批量更新 数据删除数据删除一条数据批量删除 数据查询…

S-Edge网关:柔性部署,让物联网接入更统一

S-Edge网关是什么&#xff1f; 网关是在实际物理世界与虚拟网络世界相连接的交叉点&#xff0c;为了让这个交叉点尽可能的复用&#xff0c;无需每种设备都配套一种连接方式&#xff0c;边缘网关主要就是用于传感器等物理设备与网络实现数据交互的通用设备&#xff0c;也称为物…

跨部门协作中的沟通困境与平台建设策略——以软硬件研发为例

一、背景 在科技行业&#xff0c;跨部门合作的重要性不言而喻&#xff0c;然而实际工作中&#xff0c;经常会遭遇沟通不畅的现象。以软件与硬件研发部门为例&#xff0c;两者在产品研发过程中经常需要紧密协作&#xff0c;但却时常出现信息传递障碍。当你试图阐述观点时&#…

SpringCloud系列(11)--将微服务注册进Eureka集群

前言&#xff1a;在上一章节中我们介绍并成功搭建了Eureka集群&#xff0c;本章节则介绍如何把微服务注册进Eureka集群&#xff0c;使服务达到高可用的目的 Eureka架构原理图 1、分别修改consumer-order80模块和provider-payment8001模块的application.yml文件&#xff0c;使这…

pnpm 安装后 node_modules 是什么结构?为什么 webpack 不识别 pnpm 安装的包?

本篇研究&#xff1a;使用 pnpm 安装依赖时&#xff0c;node_modules 下是什么结构 回顾 npm3 之前&#xff1a;依赖树 缺点&#xff1a; frequently packages were creating too deep dependency trees, which caused long directory paths issue on Windowspackages were c…

Linux(韦东山)

linux和windows的差别 推荐学习路线 先学习 应用程序 然后&#xff1a; 驱动程序基础 最后&#xff1a;项目 韦东山课程学习顺序 看完第六篇之后&#xff0c;还可以继续做更多的官网的项目 入门之后&#xff0c;根据自己的需要学习bootloader / 驱动大全 / LVGL

微信小程序实时日志使用,setFilterMsg用法

实时日志 背景 为帮助小程序开发者快捷地排查小程序漏洞、定位问题&#xff0c;我们推出了实时日志功能。开发者可通过提供的接口打印日志&#xff0c;日志汇聚并实时上报到小程序后台。开发者可从We分析“性能质量->实时日志->小程序日志”进入小程序端日志查询页面&am…

数据结构(学习笔记)王道

一、绪论 1.1 数据结构的基本概念 数据&#xff1a;是信息的载体&#xff0c;是描述客观事物属性的数、字符以及所有输入到计算机中并被计算机程序识别和处理的符号的集合。&#xff08;计算机程序加工的原料&#xff09;数据元素&#xff1a;数据的基本单位&#xff0c;由若干…

【深度学习】烟雾和火焰数据集,野外数据集,超大量数据集,目标检测,YOLOv5

标注了2w张数据集&#xff0c;是目标检测yolo格式的&#xff0c;有火焰、烟雾两个目标&#xff0c;下图是训练时候的样子&#xff1a; 训练方法看这里&#xff1a; https://qq742971636.blog.csdn.net/article/details/138097481 数据集介绍 都是博主辛苦整理和标注的&…

8.0MGR单主模式搭建_克隆(clone)插件方式

为了应对事务一致性要求很高的系统对高可用数据库系统的要求&#xff0c;并且增强高可用集群的自管理能力&#xff0c;避免节点故障后的failover需要人工干预或其它辅助工具干预&#xff0c;MySQL5.7新引入了Group Replication&#xff0c;用于搭建更高事务一致性的高可用数据库…

配置网络设备的密码设置以及忘记密码的恢复方式以及实现全网互通

1.实验拓扑图&#xff1a; 2.实验需求&#xff1a; 1.推荐步骤 1.1配置IP&#xff1a; 不过多说了&#xff0c;较为基础&#xff08;略&#xff09; 2.推荐步骤 2.所有网络设备配置console接口密码 首先进入全局模式&#xff0c;输入以下代码(进入接口console接口0给其配置密…

HTTP慢连接攻击的原理和防范措施

随着互联网的快速发展&#xff0c;网络安全问题日益凸显&#xff0c;网络攻击事件频繁发生。其中&#xff0c;HTTP慢速攻击作为一种隐蔽且高效的攻击方式&#xff0c;近年来逐渐出现的越来越多。 为了防范这些网络攻击&#xff0c;我们需要先了解这些攻击情况&#xff0c;这样…

html--canvas粒子球

<!doctype html> <html> <head> <meta charset"utf-8"> <title>canvas粒子球</title><link type"text/css" href"css/style.css" rel"stylesheet" /></head> <body><script…

TDSQL手动调整备份节点或冷备节点

一、背景描述 近期TDSQL数据库备份不稳定&#xff0c;有些set实例的备份任务未自动发起。经排查分析&#xff0c;存在多个set实例容量已经超过TB级别&#xff0c;且冷备节点都是同一台。因此&#xff0c;需要手动将当前备份节点改到其他备节点&#xff0c;开启增量备份&#x…

杰理695的UI模式LED灯控制

UI模式LED灯修改每个模式对应的LED灯闪烁修改在ui_normal_status_deal(u8 *status, u8 *power_status, u8 ui_mg_para)

运维 kubernetes(k8s)基础学习

一、容器相关 1、发展历程&#xff1a;主机–虚拟机–容器 主机类似别墅的概念&#xff0c;一个地基上盖的房子只属于一个人家&#xff0c;很多房子会空出来&#xff0c;资源比较空闲浪费。 虚拟机类似楼房&#xff0c;一个地基上盖的楼房住着很多人家&#xff0c;相对主机模式…

easyx库的学习(鼠标信息)

前言 本次博客是作为介绍easyx库的使用&#xff0c;最好是直接代码打到底&#xff0c;然后看效果即可 代码 int main() {initgraph(640, 480, EX_SHOWCONSOLE|EX_DBLCLKS);setbkcolor(RGB(231, 114, 227));cleardevice();//定义消息结构体ExMessage msg { 0 };//获取消息wh…

HTB Runner

Runner User Nmap ──(root㉿kali)-[/home/…/machine/SeasonV/linux/Runner] └─# nmap -A runner.htb -T 4 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-04-22 23:07 EDT Stats: 0:00:01 elapsed; 0 hosts completed (1 up), 1 undergoing SYN Stealth Sca…

在 Windows 系统上彻底卸载 TeamViewer 软件

在 Windows 系统上彻底卸载 TeamViewer 软件 References 免费版仅供个人使用 您的会话将在 5 分钟后终止 Close TeamViewer by locating the TeamViewer icon in the system tray, right click and “Exit TeamViewer”. Right click Windows start menu then Control Panel -…