首页 > 其他分享 >获取three.js两点之间的控制点

获取three.js两点之间的控制点

时间:2024-06-17 09:36:00浏览次数:13  
标签:angle three v3 js v0 item 控制点 const THREE

首先有两个点: 

const v0 = new THREE.Vector3(item.x, item.y, item.z);
const v3 = new THREE.Vector3(item.target.x, item.target.y, item.target.z);

如果想要获取中间点的控制线直接调用方法 getBezierPoint(v0,v3);

getBezierPoint(v0,v3){  // 获取两点的控制点
        // 角度
        const angle = v0.angleTo(v3)   * 180 / Math.PI; // 0 ~ Math.PI//
        // 角度值与长度值(下面可以调节不同的数字展示不同的曲线)
        const aLen1 = angle * 2, hLen1 = angle * angle * 10;
        const aLen2 = angle * 0, hLen2 = angle * angle * 1;
        // 两点的中心位置
        const centerPoint = this.getVCenter(v0.clone(), v3.clone())
        // 法线向量、使用中心点和向上的向量
        const rayLine = new THREE.Ray(centerPoint, new THREE.Vector3(2, 1, 0));
        // API 更新后,Ray类的 at 方法需要两个参数
        const temp  = new THREE.Vector3(0, 0, 0);
        // 计算位置
        const at1 = hLen1 / rayLine.at(1,temp).distanceTo(centerPoint);
        const at2 = hLen2 / rayLine.at(1,temp).distanceTo(centerPoint);
        // 顶点坐标
        const vTop1 = rayLine.at(at1, temp);
        const vTop2 = rayLine.at(at2, temp);
        // 控制点坐标
        const v1 = this.getLenVector(v0.clone(), vTop1, aLen1);
        const v2 = this.getLenVector(v3.clone(), vTop2, aLen2);
        return [v1, v2]
    }

  这样获得的控制点都是按照角度绘制的 

aLen1/ hLen1 /aLen2 /hLen2  可以根据自己项目做出调整

标签:angle,three,v3,js,v0,item,控制点,const,THREE
From: https://www.cnblogs.com/huchangjun/p/18251735

相关文章

  • JS数组常用方法总结,含ES6新方法,附示例代码
    ......
  • JS逆向入门
    C级通关第一题打开页面https://www.aqistudy.cn/实现接口https://www.aqistudy.cn/apinew/aqistudyapi.php的正常请求并获取明文响应分析开着F12进页面遇到无限debugger一个neverpausehere下去关闭所有断点Activatebreakpoint(Ctrl+F8),随便逛逛网站找找目标接口......
  • js实现实现九宫格乱序抽奖
    我们以前写的九宫格抽奖,都是顺时针按照顺序进行旋转抽奖,今天给大家分享一下乱序,就是不按照一定顺序的。用户的具体步骤:用户点击开始抽奖时,奖项开始随机闪,闪到一定次数后停止并且进行抽奖成功提示;这个闪到一定的次数,次数是随机的;就是当我们点击按钮时生成一个随机数(就相当于是......
  • 要将URL参数转换为JSON对象,可以使用以下函数:
    要将URL参数转换为JSON对象,可以使用以下函数:javascriptfunctiongetQueryParams(url){//使用正则表达式提取URL参数constparamsString=url.split('?')[1];if(!paramsString){return{};}//将参数字符串分割成数组,并解析键值对constparams=......
  • 【图像隐写】基于Jsteg算法实现JPEG图像信息隐藏,可设置DCT系数 嵌入率附Matlab代码
     ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,代码获取、论文复现及科研仿真合作可私信。......
  • 【three.js案例一】智慧星球
    直接附上源码:import*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';//场景constscene=newTHREE.Scene();constgeometry=newTHREE.SphereGeometry(50,32,16);console.log('.postion�......
  • 通过Vue3+高德地图的JS API实现市区地图渲染
    效果图:核心代码:<scriptsetup>import{onMounted,onUnmounted}from'vue';importAMapLoaderfrom'@amap/amap-jsapi-loader';import{message}from'ant-design-vue';importschoolfrom'@/assets/icons/school......
  • Day.js日期时间的常计算
    Day.js日期时间的常计算1、介绍Day.js:Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。主要为操作时间日期的库。2、场景使用计算周几、当月第一天计算xx天前/后的日期将时间戳转换为日期(YYYY-MM-DD)计算月天数获取两个日期的时间差3、使用例......
  • 支付宝spi接口设计验签和返回结果加签注意点,支付宝使用JSONObject对象
    支付宝spi接口设计验签和返回结果加签注意点,支付宝使用JSONObject对象SPI三方服务接入指南https://opendocs.alipay.com/isv/spiforisv服务端实现Demo以下Demo是通过Java实现的SPI服务样例,包括验签支付宝请求报文、业务逻辑处理、商家加签以及响应报文构造的逻辑。......
  • 支付宝签名和验签使用JSONObject是最优解。json字符串顺序和==符号都一致演示代码
    支付宝签名和验签使用JSONObject是最优解。json字符串顺序和==符号都一致演示代码支付宝spi接口设计验签和返回结果加签注意点,支付宝使用JSONObject对象https://www.cnblogs.com/oktokeep/p/18249346packagecom.example.core.mydemo;importcom.alibaba.fastjson.JSON;imp......