【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()

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

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

相关文章

爱普生RX-8130CE内置电池控制 RTC

特点&#xff1a;(1)封装极小&#xff0c;集成度高RX-8130CE是一个带|2C接口的实时时钟模块&#xff0c;内部集成32.768KHz晶体振荡器。实时时钟功能不仅集成了年、月、日、星期、小时、分、秒的日历和时钟计数器&#xff0c;同时也有时间闹钟、间隔定时器、时间更新中断等功能…

算法练习|Leetcode49字母异位词分词 ,Leetcode128最长连续序列,Leetcode3无重复字符的最长子串,sql总结

目录 一、Leetcode49字母异位词分词题目描述解题思路方法:哈希总结 二、Leetcode128最长连续序列题目描述解题思路方法:总结 三、Leetcode3无重复字符的最长子串题目描述解题思路方法:双指针法总结sql总结 一、Leetcode49字母异位词分词 题目描述 给你一个字符串数组&#xf…

flask后端实践03-Flask-Restful处理Controller

Flask-Restful处理Controller flask-restful-quickstart 使用flask-restful主要目的是解决如下问题 注册多个路由 api.add_resource(HelloWorld,/,/hello)从demo示例可以看到&#xff0c; 这里类似go的httpserver的httpHandler的概念&#xff0c;写一个路由处理器&#xff…

编译支持播放H265的cef控件

接着在上次编译的基础上增加h265支持编译支持视频播放的cef控件&#xff08;h264&#xff09; 测试页面&#xff0c;直接使用cef_enhancement,里边带着的那个html即可&#xff0c;h265视频去这个网站下载elecard,我修改的这个版本参考了里边的修改方式&#xff0c;不过我的这个…

js 数组的常用方法

目录 数组关注是否改变原数组 操作 增 会影响原数组 push() unshift() splice() 不会影响 concat() 删 会影响原数组 pop() shift() splice() 不会影响 slice() 改 splice&#xff08;&#xff09; 查 indexOf() includes() find() 排序 reserve() sor…

大语言模型(LLM)漏洞爆发,AI模型无一幸免

本文概述了人工智能初创公司Anthropic于2024年04月03日发表的一篇针对人工智能安全的论文&#xff0c;该公司在本论文中宣布的一种新的“越狱”技术&#xff0c;名为Many-shot Jailbreaking&#xff08;多轮越狱&#xff09;。文章详细描述了目前大语言模型&#xff08;LLM&…

CMake 编译项目

一、概述 cmake 是C一个很重要的编译和项目管理工具&#xff0c;我们在git 上以及常见的项目现在多数都是用cmake 管理的&#xff0c;那么我们今天就做一个同时有Opencv和CGAL 以及PCL 的项目。 二、项目管理 重点是CMakeList.txt 1、CMakeList.txt cmake_minimum_requir…

Springboot3集成Web、RedisTemplate、Test和knife4j

本例将展示&#xff0c;如何在Springboot3中完成&#xff1a; Redis功能的Web接口实现构建Redis功能的单元测试knife4j自动化生成文档 Redis功能 Pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter…

windows SDK编程 --- 消息(3)

前置知识 一、消息的分类 1. 鼠标消息 处理与鼠标交互相关的事件&#xff0c;比如移动、点击和滚动等。例如&#xff1a; WM_MOUSEMOVE: 当鼠标在窗口客户区内移动时发送。WM_LBUTTONDOWN: 当用户按下鼠标左键时发送。WM_LBUTTONUP: 当用户释放鼠标左键时发送。WM_RBUTTOND…

PaddleSeg(1)配置文件详解

PaddleSeg配置文件在configs目录下,一个文件主要包括几个部分: 1.bs和iter batch_size: 1 iters: 100 #迭代次数2.训练数据及其处理 3.验证数据集及其处理 4.模型 5.优化器 6.学习策略 7.损失函数 2.训练数据及其处理 train_dataset: # 训练集数据设置type: Dataset # 数据…

区块链交易所技术开发架构解析 交易所开发团队

区块链交易所是加密货币市场中的关键基础设施之一&#xff0c;它提供了一个平台&#xff0c;让用户可以买卖各种数字资产。而搭建一个功能完善、安全可靠的交易所需要一个复杂的技术开发架构&#xff0c;以及一个协调配合的交易所开发团队。下面我们将分析交易所的技术架构以及…

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

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

Ghost Buster Pro for Mac:强大的系统优化工具

Ghost Buster Pro for Mac是一款功能强大的系统优化工具&#xff0c;专为Mac用户设计&#xff0c;旨在提供全方位的系统清理、优化和维护服务。 Ghost Buster Pro for Mac v3.2.5激活版下载 这款软件拥有出色的垃圾清理能力&#xff0c;能够深度扫描并清除Mac上的无效目录、文件…

个人网站的SEO优化系列——如何实现搜索引擎的收录

如果你自己做了一个网站&#xff0c;并且想让更多的人知道你的网站&#xff0c;那么无非就是两种途径 一、自己进行宣传&#xff0c;或者花钱宣传 二、使用搜索引擎的自然流量 而如果搜索引擎都没有收录你的站点&#xff0c;别说是自然流量&#xff0c;就算是使用特定语句【sit…

文件上传服务器、文件展示等异步问题

问题&#xff1a; 文件上传模块&#xff1a;当文件已经上传完成&#xff0c;文件进度已经走完了&#xff0c;但是服务器响应还没有返回结果&#xff0c;出现了&#xff0c;获取不到上传后的文件路径&#xff0c;需要等待服务器返回结果后&#xff0c;才能获取文件路径并点击跳…

pytorch的mask-rcnn的模型参数解释

输入图像1920x1080,batch_size8为例. 训练阶段 loss_dict model(images,targets) 入参 images: List(Tensor(3,1920,1080))[8]targets: List(dict()[3])[8] dict详情见下表: keytypedtypesizeremarkboxesTensorfloat32(n,4)1the ground-truth boxes in [x1, y1, x2, y2] …

excel中怎么用乘法、加法来替代AND和OR函数

你可以使用乘法和加法来替代Excel中的AND和OR函数&#xff0c;虽然这样做可能会增加公式的复杂度&#xff0c;但在某些情况下是可行的。 1. 使用乘法替代AND函数&#xff1a;AND函数用于判断一系列条件是否同时成立&#xff0c;如果所有条件都为TRUE&#xff0c;则返回TRUE&…

IOMMU和SMMU详解

前言&#xff1a; IOMMU&#xff08;输入输出内存管理单元&#xff09;的原理与CPU中的MMU&#xff08;内存管理单元&#xff09;相似。它的作用是管理设备的内存访问请求&#xff0c;允许安全、高效地在设备和内存之间直接传输数据。IOMMU通常用于支持高速数据传输的设备&…

【前端】npm常用命令

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、npm是什么二、npm常用命令三、总结 前言 随着开发语言及人工智能工具的普及&#xff0c;使得越来越多的人能够上手操作执行一些简单命令&#xff0c;本文主…

java生成数据库数据到excel当做下拉选择,copy就完事~

背景&#xff1a;由于需要下载模板&#xff0c;模板包含下拉选择框&#xff0c;但是下拉选择框不想手写&#xff0c;并且需要从数据库读取&#xff0c;由于直接设置excel会有单元格最大255个字符长度限制&#xff0c;所以用到以下部分代码。 思路&#xff1a;由于数据模板在sh…