贝塞尔曲线在Unity中的应用
前言:国庆放假后基本整个人的散掉了。加之种种原因,没时间没心情写博客。最近研究了一下3d的一些效果。其中有类似翻书撕纸的操作,可是一个panel怎么由平整的变成弯曲的呢?
两点可以确定一条直线,三点可以实现一条曲线。其实曲线按照更小的长度来看的话,也是很多段直线构成的。那么三点确定一条曲线的插值运算,就是贝塞尔曲线。今天用Unity实现一阶贝塞尔和二阶贝塞尔。顺便谈谈Unity的Mesh。
一阶贝塞尔:
Unity新建三个cube,摆放在同一个平面内(xy,xz,yz)都行,然后位置不同即可。编写脚本Beizer
public class Beizer : MonoBehaviour
{
public Transform p0, p1, p2;
[Range(0,1)]
public float t;
// Start is called before the first frame update
void OnValidate()
{
Vector3 temp = p0.position + (p1.position - p0.position) * t;
p2.position = temp;
} private void Start()
{ } // Update is called once per frame
void Update()
{
Vector3 temp = p0.position + (p1.position - p0.position) * t;
p2.position = temp; }
}
当t的值为1时,p2的位置为p1的位置(重合了);
当t的值为0时,p2的位置在p0的位置上(重合了);
当t的值为0.5时,p2的位置在p0与p1的中间;以上就是一阶贝塞尔的内容。其公式为:B(t)=p0+(p1-p0)*t;
二阶贝塞尔:
Unity同样使用刚刚的场景。只不过p2的位置可以调整下y轴,然后使用LineRender来可视化。
public class Beizer2 : MonoBehaviour
{
public Transform p0, p1, p2;
public LineRenderer line; public int posCount; private void OnValidate()
{
line.startWidth = 1;
line.endWidth = 1;
line.startColor = Color.red;
line.endColor = Color.red;
line.positionCount = posCount;
Draw();
}
// Start is called before the first frame update
void Start()
{
line.startWidth = 1;
line.endWidth = 1;
line.startColor = Color.red;
line.endColor = Color.red;
line.positionCount = posCount;
} // Update is called once per frame
void Update()
{
Draw();
} void Draw()
{
for (int i = 0; i < posCount; i++)
{
float tempT = (1f / (float)posCount) * i;
Vector3 temp = Calculate(tempT, p0.position, p1.position, p2.position);
line.SetPosition(i, temp);
}
} Vector3 Calculate(float tValue,Vector3 v0,Vector3 v1,Vector3 v2)
{
return Mathf.Pow(1 - tValue, 2) * v0 + 2 * tValue * (1 - tValue) * v1 + Mathf.Pow(tValue, 2) * v2;
}
}
尝试拖动中间那个Cube,可以看见这条曲线也会随之发生变化。
二阶贝塞尔公式:B2(t)=(1 - t)^2 * p0 + 2 * t * (1 - t) * p1 + (t) ^2* p2;
上面说完,就说说开头提到的问题,如何让一个panel变成弯曲的?刚开始我直接傻掉了。后来才知道可以改变Mesh,自定义mesh,再渲染。mesh的各个顶点是用一个Vecter3数组保存的,如果我们直接修改各个顶点的位置信息,再渲染,就会改变mesh的形状,从而显示出各种形状。我们把mesh数组的每一行开头看作是一个点,那么合起来就是一条线,只需把每行的y轴用贝塞尔曲线公式算出就行了。xz轴不用改变,这样就是弯曲的了。我还做了一个翻动动画,整个过程的弯曲程度是通过贝塞尔曲线插值运算出来的。
mesh这个东西很奇妙,主要包括顶点、三角片、uv,完全可以定义出自己想要的mesh。后来的无限分割模型其实也是这个思路,重新生成mesh,只不过这个就很难了,我用的是Unity商城里的切割插件。(其实我不太能搞懂mesh,目前只会用,所以不能再细说下去了)
贝塞尔曲线在Unity中的应用的更多相关文章
- 浅谈贝塞尔曲线以及iOS中粘性动画的实现
关于贝塞尔曲线,网上相关的文章很多,这里我主要想用更简单的方法让大家理解贝塞尔曲线,当然,这仅仅是我个人的理解,如有错误的地方还请大家能够帮忙指出来,这样大家才能一起进步. 贝塞尔曲线,常用到的可分为 ...
- 【Unity】贝塞尔曲线关于点、长度、切线计算在 Unity中的C#实现
原文:[Unity]贝塞尔曲线关于点.长度.切线计算在 Unity中的C#实现 写在前面 最近给项目做了个路径编辑,基本思路是满足几个基本需求: [额外说明]其实本篇和这个没关系,可以跳过" ...
- 贝塞尔曲线:原理、自定义贝塞尔曲线View、使用!!!
一.原理 转自:http://www.2cto.com/kf/201401/275838.html Android动画学习Demo(3) 沿着贝塞尔曲线移动的Property Animation Pr ...
- CSS3 三次贝塞尔曲线(cubic-bezier)
例子:transition:all 1s cubic-bezier(.21,.2,.65,.1) 最近在看animation模块,其中animation-timing-function 和 trans ...
- JS模拟CSS3动画-贝塞尔曲线
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
- css3动画贝塞尔曲线cubic-bezier,css3动画的五种情况
当大家开始做css3动画的时候,了解贝塞尔曲线就成了不可或缺的.“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数 ...
- NGUI研究院之在Unity中使用贝塞尔曲线(六)[转]
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- 在Unity中使用贝塞尔曲线(转)
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- NGUI研究之在Unity中使用贝塞尔曲线
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天由于工作的原因须要将贝塞尔曲线加在project中.那么我迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的随意角度的曲线,这两个点一 ...
随机推荐
- python计算项目净现值和内部回报率
代码: import numpy as np from numpy import irr import warnings def project(number, period_list): rate ...
- C#编写程序,计算数组中奇数之和和偶数之和
编写程序,计算数组中奇数之和和偶数之和. 代码: using System; using System.Collections.Generic; using System.Linq; using Sy ...
- CCF201912-2 回收站选址
解题思路:这道题唬人的在于坐标有正有负哈,刚开始不知道怎么下爪,仔细思考过后,我可是会面向对象编程的啊哈哈哈哈,我可是最喜欢封装了哈哈哈哈. 1.首先可以把每个点用一个结构体来定义,包含他的x,y坐标 ...
- 使用Object.Defineproperties改变对象数据结构
此方法设置键的时候如果需要使键为变量则需要加中括号[] 如下 let addKeys = Number(keys[keys.length - 1]) + 1 Object.assign(this.t ...
- Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件
1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代 ...
- 【UWP】实现一个波浪进度条
好久没写 blog 了,一个是忙,另外一个是觉得没啥好写.废话不多说,直接上效果图: 可能看到这波浪线你觉得会很难,但看完这篇 blog 后应该你也会像我一样恍然大悟.图上的图形,我们可以考虑是由 3 ...
- VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂,适合新手
1. 概述 老话说的好:舍得舍得,先舍才能后得. 言归正传,今天我们来聊聊 VUE 中使用 Mixin 实现代码的复用. 2. Mixin 的使用 2.1 不使用 Mixin 的写法 <body ...
- Python入门-import导入模块功能
1.啥是模块 模块(module):用来实现或者多个功能的Python代码,(包含变量.函数.类),本质就是*.py后缀文件. 包(package):定义了一个由模块和子包组成的Python应用程序执 ...
- pod和容器(容易混淆的地方)
在Kubenetes中,所有的容器均在 pod 中运行,一个pod可以承载一个或者多个相关的docker容器(或rkt,以及用户自定义容器),同一个Pod中的容器可以部署在同一个物理机器(可以叫宿主机 ...
- print,printf,println的区别,以及\r,\n,\r\n的区别
1.常用的是println,就是换行输出 2.print,不换行输出 3.printf常使用于格式转化 public class Print { public static void main(Str ...