Three.js 直线拐角自动圆角化(圆弧转弯)

目录

前言

计算圆心坐标

计算两条直线的角平分线

[计算dir1 dir2的夹角](#计算dir1 dir2的夹角)

计算圆心到直线交点的距离

计算圆心

计算从正X轴算起曲线开始、终止的角度

计算垂足与两直线交点距离

计算垂足

计算垂线

计算两垂线与x轴的夹角

[​编辑 计算圆弧是否按照顺时针方向来绘制](#编辑 计算圆弧是否按照顺时针方向来绘制)

成功画弧线

多个圆弧的应用


前言

圆弧使用 ArcCurve 绘制,那么需要以下参数

我们拿3个点制作一个圆弧

计算圆心坐标

由 p1 - p2和p3 - p2构成两个向量dir1 dir2 这三个点构成的两条线的方向,

计算两条直线的角平分线

dir1 dir2 向量相加得到两条向量的角平分线

计算dir1 dir2的夹角

通过点乘计算两向量的余弦值,然后通过反余弦得到夹角

计算圆心到直线交点的距离

设圆弧半径为R,设圆心到直线交点距离为L,R = L * Sin(夹角/2) ==> L = R / Sin(夹角/2)

计算圆心

角平分线方向知道了,两向量交点到圆心的距离L知道了,那么圆心坐标就等于 起点+角平分线方向*L

计算从正X轴算起曲线开始、终止的角度

计算垂足与两直线交点距离

计算垂足

垂足向量等于p2起点+各方向*垂足到两直线交点距离

计算垂线

计算两垂线与x轴的夹角

设x轴向量为(1, 0, 0)。

这里需要注意点乘的操作是基于180度有效的,也就是余弦在180度内有效为一个周期,如果垂线的y小于0,需要一个圆周 减去 点乘所算的夹角,如下图示意,点乘算的是黑色弧度角,但真正的垂线与x轴夹角是彩色弧度

计算圆弧是否按照顺时针方向来绘制

根据WebGL右手螺旋定则,dir1 叉乘 dir2 得到的法线向量,判断这个向量的方向是否大于0

成功画弧线

多个圆弧的应用

逻辑和单个圆弧是一样的,需要注意的是,如果多个点之间并不存在弧度,就不需要做弧度处理,可以用两直线向量叉乘计算,如果叉乘结果是0向量(正弦值为0,两向量相反即夹角180度)则说明两条直线没有夹角。

相关推荐
老鼠只爱大米几秒前
LeetCode经典算法面试题 #46:全排列(回溯、交换、剪枝等五种实现方案详细解析)
算法·leetcode·剪枝·回溯·全排列·stj算法
Dovis(誓平步青云)14 分钟前
《滑动窗口算法:从 “暴力遍历” 到 “线性高效” 的思维跃迁》
运维·服务器·数据库·算法
_OP_CHEN40 分钟前
【算法基础篇】(五十七)线性代数之矩阵乘法从入门到实战:手撕模板 + 真题详解
线性代数·算法·矩阵·蓝桥杯·c/c++·矩阵乘法·acm/icpc
天天爱吃肉82181 小时前
【跨界封神|周杰伦×王传福(陶晶莹主持):音乐创作与新能源NVH测试,底层逻辑竟完全同源!(新人必看入行指南)】
python·嵌入式硬件·算法·汽车
im_AMBER1 小时前
Leetcode 114 链表中的下一个更大节点 | 删除排序链表中的重复元素 II
算法·leetcode
xhbaitxl1 小时前
算法学习day38-动态规划
学习·算法·动态规划
多恩Stone1 小时前
【3D AICG 系列-6】OmniPart 训练流程梳理
人工智能·pytorch·算法·3d·aigc
历程里程碑1 小时前
普通数组----轮转数组
java·数据结构·c++·算法·spring·leetcode·eclipse
pp起床1 小时前
贪心算法 | part02
算法·leetcode·贪心算法
sin_hielo1 小时前
leetcode 1653
数据结构·算法·leetcode