【JavaScriptThreejs】判断路径在二维平面上投影的方向顺逆时针

原理分析

可以将路径每个连续的两点向量叉乘相加,根据正负性判断路径顺逆时针性
当我们计算两个向量的叉积时,结果是一个新的向量,其方向垂直于这两个向量所在的平面,并且其大小与这两个向量构成的平行四边形的面积成正比。这个新向量的方向由右手定则确定:如果你将右手的四指放在两个向量的方向上,让拇指指向叉积的方向,那么你的手指弯曲的方向就是两个向量的顺时针旋转方向。

当我们应用这个概念到路径的情况时,我们可以将相邻的路径点表示为向量,然后计算它们之间的叉积。这个叉积的 z 分量(如果我们将路径投影到 xy 平面上)可以告诉我们这两个向量之间的顺时针或逆时针关系。
在这里插入图片描述
由于threejs很多地方对凹凸多边形没有限制,可以在输入端限制凹三角或在计算中舍弃凹点

代码

import { Vector3 } from "three";

/**
 * 判断向量是否为顺时针  返回值true逆时针  false 顺时针
 * @param {[Vector3]} path //vec3路径
 * @param {'x'|'y'|'z'} forword //基准
 * @returns 
 */
export default function isClockwise(path, forword = 'z') {
    let sum = 0;
    const n = path.length;

    for (let i = 0; i < n; i++) {
        const current = path[i];
        const next = path[(i + 1) % n]; // 取下一个点,循环到第一个点

        // 计算当前点到下一个点的向量
        const vector = next.clone().sub(current);

        // 只考虑 xy 平面上的向量,忽略 z 分量
        vector.z = 0;

        // 叉积的 z 分量可以判断顺时针还是逆时针
        if (forword == 'z')
            sum += (current.x * next.y - next.x * current.y);
        else if (forword == 'x')
            sum += (current.z * next.y - next.z * current.y);
        else if (forword == 'y')
            sum += (current.x * next.z - next.x * current.z);
	
		/**
		*如果业务需要 可以在这里判断sum大小变化确定 如果增或者减反向 则可判断这里出现凹点
		*/
    }

    // 如果 sum 大于 0,则路径是逆时针的;如果 sum 小于 0,则路径是顺时针的
    return sum > 0;
}

使用

使用isClick判断路径方向性,并转为顺时针
   let reverse = isClockwise(vertices)
    if (reverse) vertices.reverse()

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch:崭新的打分机制 - Learning To Rank (LTR)

警告&#xff1a;“学习排名 (Learning To Rank)” 功能处于技术预览版&#xff0c;可能会在未来版本中更改或删除。 Elastic 将努力解决任何问题&#xff0c;但此功能不受官方 GA 功能的支持 SLA 的约束。 注意&#xff1a;此功能是在版本 8.12.0 中引入的&#xff0c;并且仅适…

【云计算】云数据中心网络(七):负载均衡

《云网络》系列&#xff0c;共包含以下文章&#xff1a; 云网络是未来的网络基础设施云网络产品体系概述云数据中心网络&#xff08;一&#xff09;&#xff1a;VPC云数据中心网络&#xff08;二&#xff09;&#xff1a;弹性公网 IP云数据中心网络&#xff08;三&#xff09;…

防火墙如何工作

防火墙是网络安全的重要组成部分&#xff0c;充当受信任的内部网络与外部世界之间的保护屏障。它根据预定的安全规则监视和控制传入和传出的网络流量。您是否知道防火墙的概念可以追溯到 20 世纪 80 年代&#xff0c;当时互联网还处于早期阶段&#xff1f;从那时起&#xff0c;…

SpringBoot项目启动的时候直接退出了?

SpringBoot项目启动的时候直接退出了&#xff1f; 如下图&#xff1a; 在启动SpringBoot项目的时候仅仅用了1.209s&#xff0c;然后直接退出了&#xff0c;也没有出现启动的项目对应的服务器端口号&#xff1f;为什么会这样呢&#xff1f;因为既然有服务器端口号 那么肯定会有…

linux系统是未来_大小写敏感_case_sensitive_编程原生态

修改 py 文件 &#x1f94a; 回忆上次内容 上次尝试了 两个vim 同时打开 同一py文件 vim出现了Error 有各种选择 错误拼写 pront 导致 运行时 出现了NameError 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 错误(Error) 不是 我们 无能的标记 …

k8s pod使用sriov

之前的文章中讲了k8s multus的使用&#xff0c;本章节来讲述下如何使用multus来实现sriov的使用。 一、sriov 简介 SR-IOV在2010年左右由Intel提出&#xff0c;但是随着容器技术的推广&#xff0c;intel官方也给出了SR-IOV技术在容器中使用的开源组件&#xff0c;例如&#…

力扣(leetcode) 407. 接雨水 II 3D接雨水

力扣(leetcode) 407. 接雨水 II 3D接雨水 给你一个 m x n 的矩阵&#xff0c;其中的值均为非负整数&#xff0c;代表二维高度图每个单元的高度&#xff0c;请计算图中形状最多能接多少体积的雨水。 示例 1: 输入: heightMap [[1,4,3,1,3,2],[3,2,1,3,2,4],[2,3,3,2,3,1]] 输…

Excel vlookup函数的使用教程 和 可能遇到的错误解决方法

使用VLOOKUP示例 被查询的表格 表一 A列B列C列A1aB2bC3c 要匹配的列 表二 F列G列H列ACBDA 要G列匹配字母&#xff0c;H列匹配数字 G 使用公式VLOOKUP(F5,A:D,3,0) 参数说明 F5 是表二 F列第五行的A A:D表是要匹配的数据列表在A到D列&#xff0c;就是表一 &#xff08;注意…

day03-(docker)

文章目录 DockerDocker和虚拟机的差别docker在linux安装配置镜像命令容器命令介绍Docker-容器&#xff08;基本操作&#xff09;docker基本操作&#xff08;数据卷&#xff09;数据卷挂载直接挂载四.Dockerfile自定义镜像五.Docker-Compose 安装修改权限镜像仓库![在这里插入图…

在城市与自然中穿行:探索自然的全新方式,健康、环保、快乐的生活方式

一辆单车&#xff0c;三五好友&#xff0c;骑行穿过城市与大自然。无论是在悠闲的周末打卡城市古建筑&#xff0c;还是选择充满挑战的“川藏线”&#xff0c;无论是在城郊绿道感受清风拂面&#xff0c;还是在洱海湖畔欣赏美好风光……如今&#xff0c;越来越多人加入骑行队伍&a…

解读币安Megadrop:如何参加第一期BounceBit活动?

币安推出新的代币发行平台 Megadrop&#xff0c;第一期为 BounceBit。 跟 launchpool 相比&#xff0c; 主要不同是 1&#xff09;锁仓 bnb 有收益的倍数加成 2&#xff09;做任务有收益加成。 我认为核心目的有两个&#xff1a; 1&#xff09;更多收益给 BNB 长期持有者&am…

Docker pull镜像名称 把本地镜像推送到远程详解

Docker pull镜像名称 把本地镜像推送到远程详解&#xff1a; Docker 镜像 仓库 容器介绍 以及镜像仓库详解 下载一个alpine的镜像演示&#xff0c;alpine是一个比较小的的linux镜像。 docker pull alpinedocker tag d4ff818577bc docker.io/itying/alpine:v1.0.1docker tag d4…

基于Linux的Ncurse库的贪吃蛇项目

贪吃蛇项目的意义 承上启下&#xff1a;从C语言基础的学习&#xff1a;数据结构链表基础、C变量、流程控制、函数、指针、结构体等。过渡到Linux系统编程&#xff1a;文件编程、进程、线程、通信、第三方等。 Linux终端图形库curses curses的名字起源于"cursor optimiz…

ELK创建仪表盘

仪表盘 一、保存search二、生成饼图三、创建仪表盘 一、保存search 首先保存一段时间内的search&#xff0c;可以添加想要的字段&#xff0c;并保存这个search方便下次直接打开该search&#xff0c;并方便在可视化和仪表盘中使用该search. 二、生成饼图 点击Visualize 选择…

C语言——内存函数的实现与模拟

1. memcpy 函数 与strcpy 函数类似 1.头文件 <string.h> 2.基本格式 • 函数memcpy从source的位置开始向后复制num个 字节 的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0…

Redis入门到通关之数据结构解析-动态字符串SDS

文章目录 Redis数据结构-动态字符串动态扩容举例二进制安全SDS优点与C语言中的字符串的区别 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间…

Spring Kafka—— KafkaListenerEndpointRegistry 隐式注册分析

由于我想在项目中实现基于 Spring kafka 动态连接 Kafka 服务&#xff0c;指定监听 Topic 并控制消费程序的启动和停止这样一个功能&#xff0c;所以就大概的了解了一下 Spring Kafka 的几个重要的类的概念&#xff0c;内容如下&#xff1a; ConsumerFactory 作用&#xff1a;…

使用JavaScript及HTML、CSS完成秒表计时器

案例要求 1.界面为一个显示计时面板和三个按钮分别为:开始&#xff0c;暂停&#xff0c;重置 2.点击开始&#xff0c;面板开始计时&#xff0c; 3.点击暂停&#xff0c;面板停止 4.点击重置&#xff0c;计时面板重新为0 案例源码 <!DOCTYPE html> <html lang"…

sqlplus / as sysdba登陆失败,(ORA-01017)

周一上班检查alert log&#xff0c;看到某个库报出大量的错误 提示无法连接到ASM实例&#xff0c;这是某知名MES厂商DBA创建的11G RAC刚刚​转交到我手上的&#xff0c;这又是给我挖了什么坑&#xff1f; 报错为ORA-01017​用户名密码不对&#xff1f;​what&#xff1f; 登陆o…

负载均衡的原理及算法

一、定义 负载均衡&#xff08;Load Balancing&#xff09;是一种计算机网络和服务器管理技术&#xff0c;旨在分配网络流量、请求或工作负载到多个服务器或资源&#xff0c;以确保这些服务器能够高效、均匀地处理负载&#xff0c;并且能够提供更高的性能、可用性和可扩展性。…