blocks|key|1197929|text|然而，我想要做的是对动画有更大的控制，这样我就可以指定从p1到p2的移动应该是0.5，从p2到p3，0.3，以及从p3到p4+0.2。这个是可能的吗？|type|blockquote|depth|inlineStyleRanges|entityRanges|data|1197930|您可以通过使用像tween.js这样的动画库来实现这一点。通过这种方式，您可以指定对象的开始和结束位置以及所需的持续时间。还可以使用宽松功能自定义转换类型。|unstyled|offset|length|1197931|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/tweenjs/tween.js/|1|http://tweenjs.github.io/tween.js/examples/03_graphs.html^0|0|8|8|0|1U|4|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@$E|S|F|T|1|U]|$E|V|F|W|1|X]]|A|$]]|$1|G|3|-4|5|D|7|Y|8|@]|9|@]|A|$]]]|H|$I|$5|J|K|L|A|$M|N]]|O|$5|J|K|L|A|$M|P]]]]

<blockquote>
 However what I would like to so is to have greater control over the animation, so that I can specify that the movement from p1 to p2 should take 0.5, from p2 to p3, 0.3, and from p3 to p4 0.2. Is this possible?
</blockquote>

You can achieve this by using an animation library like <a href="https://github.com/tweenjs/tween.js/" rel="nofollow noreferrer">tween.js</a>. In this way, you can specify the start and end position of your object and the desired duration. It's also possible to customize the type of transition by using <a href="http://tweenjs.github.io/tween.js/examples/03_graphs.html" rel="nofollow noreferrer">easing functions</a>.

blocks|key|565446|text|您有多个选项，我将描述理论，然后是一个可能的实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|565447|理论|565448|你想arclength参数化你的曲线。这意味着参数的增量1会导致沿着1的曲线移动的距离。|offset|length|565449|这种参数化将允许您完全控制您的对象的运动以任何你想要的速度，不管它不是线性的，非线性的，分段的…|565450|可能的应用|565451|有许多数值积分技术，可以让你把曲线参数化。|565452|一种可能的方法是预先计算这些值并将它们放在一个表上。选择一个小的epsilon，从第一个参数值x_0开始，在x_0，x_0%2B+epsilon，x_0%2B2*epsilon，x_0%2B2*epsilon，|565453|在这样做时，取每个样本之间的线性距离，并将其添加到累加器中。即travelled_distance+%2B=长度(samplex，samplex%2B1)。|565454|把这对放在桌子上。|565455|现在，当你在x，想移动y单位时，你可以把x圈到最近的x_n，线性地寻找第一个x_n值，它的距离大于y，然后返回那个x_n。|565456|这个算法不是最有效的，但它很容易理解和编码，所以至少可以让您开始。|565457|如果您需要一个更优化的版本，寻找弧长度参数化算法。|565458|entityMap|0|LINK|mutability|MUTABLE|url|http://mathonline.wikidot.com/arc-length-parameterization-of-curves-in-three-dimensional-s^0|0|0|2|C|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@$F|1A|G|1B|1|1C]]|A|$]]|$1|H|3|I|5|6|7|1D|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1E|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1H|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1I|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1J|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1K|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

You have multiple options I will describe the theory and then one possible implementation.

<h1>Theory</h1>

You want to <a href="http://mathonline.wikidot.com/arc-length-parameterization-of-curves-in-three-dimensional-s" rel="nofollow noreferrer">arclength parametrize</a> your curve. Which means that an increment of 1 in the parameter results in a distance of movement along the curve of 1.

This parametrization will allow you to fully control the movement of your object at any speed you want, be it constan't linear, non-linear, piecewise...

<h1>Possible application</h1>

There are many numerical integration techniques that will allow you to arclength parametrize the curve.

A possible on is to precompute the values and put them on a table. Pick a small epsilon and starting at the first parameter value x_0, evaluate the function at x_0, x_0+ epsilon, x_0 + 2*epsilon...

As you do this take the linear distance between each sample and add it to an accumulator. i.e travelled_distance += length(sample[x], sample[x+1]).

Store the pair in a table. 

Now when you are at x and want to move y units you can round x to the nearest x_n and linearly look for the first x_n value whose distance is greater than y and then return that x_n.

This algorithm is not the most efficient, but it is easy to understand and to code, so at least it can get you started.

If you need a more optimized version, look for arc length parametrization algorithms.

blocks|key|565533|text|谢谢你的建议。我最终实现这一点的方式是在我的时间变量(+three.js+getPoint函数的u变量)之间创建一个自定义映射。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|565534|我使用一个名为四硼酸的javascript库创建了一个分段线性函数。这样我就能把它映射到你身上，这样：|offset|length|565535|在t=+0，u=0时，产生p1|unordered-list-item|565536|在t=+0.5，u=+1/3时，导致p2|565537|在t=+0.8，u=+2/3时，导致p3|565538|在t=+1，u=1时，产生p4|565539|T到U地图图片|565540|entityMap|0|LINK|mutability|MUTABLE|url|http://borischumichev.github.io/everpolate/|1|https://i.stack.imgur.com/DieBb.png^0|0|7|3|0|0|0|0|0|0|0|7|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|H|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|H|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

Thanks for the suggestions. The way I finally implemented this was to create a custom mapping between my time variable, an the u variable for three.js getPoint function.

I created a piecewise linear functionn using a javascript library called <a href="http://borischumichev.github.io/everpolate/" rel="nofollow noreferrer">everpolate</a>. This way I could map t to u such that:

<ul>
<li>At t = 0, u = 0, resulting in p1</li>
<li>At t = 0.5, u = 1/3, resulting in p2</li>
<li>At t = 0.8, u = 2/3, resulting in p3</li>
<li>At t = 1, u = 1, resulting in p4</li>
</ul>

<a href="https://i.stack.imgur.com/DieBb.png" rel="nofollow noreferrer">T to U map picture</a>

I have a catmull-rom curve defined with a couple of control points as shown here:

<img src="https://i.stack.imgur.com/UXnYO.jpg" alt="img">

I would like to animate an object moving along the curve, but be able to define the velocity of the object.

When iterating over the curve's points using the getPoint method, the object moves chordaly (in the image, at u=0, we are at p1, at u=0.25, we are at p2 etc). Using the getPointAt method, the object moves with uniform speed along the curve. 

However what I would like to so is to have greater control over the animation, so that I can specify that the movement from p1 to p2 should take 0.5, from p2 to p3, 0.3, and from p3 to p4 0.2. Is this possible?

Move object along curve with custom velocity

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个catmull曲线定义了几个控制点，如下所示：​​我想动画一个物体沿着曲线移动，但能够定义物体的速度。当使用getPoint方法迭代曲线上的点时，对象会移动坐标(在图像中，在u=0，我们在p1，在u=0.25，在p2等等)。利用getPointAt方法，物体沿曲线以匀速运动。然而，我想要做的是对动画有更大的控制...

问用自定义速度沿曲线移动物体
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用自定义速度沿曲线移动物体EN