Three.js样条曲线、贝赛尔曲线
样条曲线、贝赛尔曲线
本文是Three.js电子书的7.3节
规则的曲线比如圆、椭圆、抛物线都可以用一个函数去描述,对于不规则的曲线无法使用一个特定的函数去描述,这也就是样条曲线和贝塞尔曲线出现的原因。Threejs提供了这两种曲线的API,不需要自己封装,如果你想深入研究可以学习计算机图形学。
样条曲线、贝赛尔曲线 样条曲线 贝赛尔曲线 经过一系列点创建平滑的样条曲线 SplineCurve 2D Catmull-Rom算法 CatmullRomCurve3 3D 起点、终点和1个控制点定义 QuadraticBezierCurve 2D QuadraticBezierCurve3 3D 二次贝赛尔曲线 起点、终点和2个控制点定义 CubicBezierCurve 2D CubicBezierCurve3 3D 三次贝赛尔曲线
一条光滑样条曲线案例
在三维空间中设置5个顶点,输入三维样条曲线CatmullRomCurve3作为参数,然后返回更多个顶点,通过返回的顶点数据,构建一个几何体,通过Line
可以绘制出来一条沿着5个顶点的光滑样条曲线。
var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
// 三维样条曲线 Catmull-Rom算法
var curve = new THREE.CatmullRomCurve3([new THREE.Vector3(-50, 20, 90),new THREE.Vector3(-10, 40, 40),new THREE.Vector3(0, 0, 0),new THREE.Vector3(60, -60, 0),new THREE.Vector3(70, 0, 80)
]);
//getPoints是基类Curve的方法,返回一个vector3对象作为元素组成的数组
var points = curve.getPoints(100); //分段数100,返回101个顶点
// setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
geometry.setFromPoints(points);
//材质对象
var material = new THREE.LineBasicMaterial({color: 0x000000
});
//线条模型对象
var line = new THREE.Line(geometry, material);
scene.add(line); //线条对象添加到场景中
通过调用threejs样条曲线或贝塞尔曲线的API,你可以输入有限个顶点返回更多顶点,然后绘制一条光滑的轮廓曲线。
贝塞尔曲线
贝塞尔曲线和样条曲线不同,多了一个控制点概念。
二次贝赛尔曲线的参数p1、p3是起始点,p2是控制点,控制点不在贝塞尔曲线上。
var p1 = new THREE.Vector3(-80, 0, 0);
var p2 = new THREE.Vector3(20, 100, 0);
var p3 = new THREE.Vector3(80, 0, 0);
// 三维二次贝赛尔曲线
var curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);
二次贝赛尔曲线的参数p1、p4是起始点,p2、p3是控制点,控制点不在贝塞尔曲线上。
var p1 = new THREE.Vector3(-80, 0, 0);
var p2 = new THREE.Vector3(-40, 100, 0);
var p3 = new THREE.Vector3(40, 100, 0);
var p4 = new THREE.Vector3(80, 0, 0);
// 三维三次贝赛尔曲线
var curve = new THREE.CubicBezierCurve3(p1, p2, p3, p4);
Three.js样条曲线、贝赛尔曲线相关推荐
- Three.js拉伸扫描成型ExtrudeGeometry
拉伸扫描成型ExtrudeGeometry 本文是Three.js电子书的7.8节 构造函数ExtrudeGeometry()和ShapeGeometry一样是利用Shape对象生成几何体对象,区别在 ...
- Three.js Example 注解 —— canvas_lines_dashed.html
本文搬自我的Github,https://github.com/555chy/three.js-example-comment,有兴趣的可以一起来完善,这个为Three.js的Example进行注解, ...
- Three.js Example 注解 —— 目录
本文搬自我的Github,https://github.com/555chy/three.js-example-comment,有兴趣的可以一起来完善,这个为Three.js的Demo进行注解的项目 ...
- Three.js(八)—— 几何体对象、曲线、三维模型
文章目录 8.几何体对象.曲线.三维模型 8.1 常见几何体和曲线API介绍 几何体 曲线 8.2 直线.椭圆.圆弧.基类Curve 圆弧线ArcCurve 曲线Curve方法.getPoints() ...
- 【带着canvas去流浪(11)】Three.js入门学习笔记
[摘要] three.js 入门学习笔记 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档 很详细,但是API部分单独 ...
- Three.js学习七——播放模型动画时模型沿着轨迹移动
目录 效果描述 实现流程 基本流程 工程文件 搭建场景 添加模型和播放动画 添加路径和模型移动 完整代码和实现效果 效果描述 在播放导入的模型动画同时,让模型沿着预定路径轨迹移动.例如导入一个会跑步动 ...
- 三维场景中创建镜面反射效果(three.js实战9)
创建镜面效果 1. demo效果 2. 实现要点 2.1 创建三维模型 2.2 创建镜面 2.3 场景动画更新 3. demo代码 1. demo效果 2. 实现要点 2.1 创建三维模型 demo中 ...
- Three.js学习五——让模型沿着轨迹移动
目录 流程 搭建场景环境 添加模型 增加运动轨迹 让模型沿轨迹运动 完整代码和效果 流程 基本流程 1.添加模型 2.增加运动轨迹 3.让模型沿轨迹运动 工程文件结构如下图: static:存放静态资 ...
- Three.js入门学习笔记12:模型沿着任意轨迹线运动
参考学习 http://www.yanhuangxueyuan.com/doc/Three.js/curveRun.html http://www.yanhuangxueyuan.com/doc/th ...
最新文章
- python脚本编写_【PyQGIS】编写用于处理框架(QGIS3)的Python脚本
- 软件测试工程师职业介绍和规划
- JAVA对象通过jackson转成json格式,属性名首字母变成小写的解决方法
- golang go-restful RESTful框架 简介
- 2021-07-15
- 辗转相除法(欧几里得算法)求 最大公约数与最小公倍数+推论与证明。
- Log4j比较全面的配置
- 【Java笔记】IO流(2):字符流
- Bellman_Ford边上权值为任意值的单源最短路径问题(+路径打印)边集合与邻接表两种实现
- 利用Eclipse的TaskList功能进行任务管理
- mysql系统结构图_MySQL架构图
- 变化检测综述:Change Detection Based on Artificial Intelligence: State-of-the-Art and Challenges
- win10 linux重置密码,Win10重置Linux子系统用户密码教程
- CTF也需要了解点电脑系统还原点
- oracle cve 漏洞,CVE安全漏洞的理解
- Kettle组件 计算器全解析
- jquery基础学习记录
- 我习于水,志成于冰——谈匠心
- ET框架关于opCode的理解
- 这一轮AI会带来什么样的范式转移?
热门文章
- 表、视图、存储过程、函数、触发器、事件
- JavaScript基础入门 封装DOM 连缀
- 家里装电线时,为啥说“走顶”比“走地”好
- SVN入门必备教程 一看就懂
- UEFI.源码分析.DXE阶段的执行
- C语言: “老板,来两份外卖,一份卤肉饭(%d),一份鸡汤面(%f)...“
- 电子商务数据分析,超详细宝典!
- python转写java踩坑记录
- java计算机毕业设计体育用品购物系统源码+数据库+系统+lw文档+mybatis+运行部署
- AdaIN(Arbitrary Style Transfer in Real-time with Adaptive Instance Normalization)——论文阅读