1. 首页
  2. three.js

three.js动画。沿复杂路径移动对象

你好。n我需要沿着这样的轨迹移动一个对象:n自1879×856 25.4kbn对象从A点移动到B点需要6秒钟。n因为我知道动画是在函数-渲染中创建的。nrequestAnimationFrame( animate );render();render() {// animation}/pre>n我可以扭曲一个对象,前后移动,但是如何创建复杂的运动路径呢?你好!n似乎你的问题与这个主题有关:与路径抗争-#8由hofk 79n你可以在那里看到螺旋线的公式,从圆柱24n到你的图片的移动。我认为最简单的方法是在你的物体上使用“gsap”。n谢谢你-Prisoner849n发现了类似的东西:物体在3D路径上移动49n混合器我需要在三个js中制作动画。n我想在这个网站上制作动画:Lusion 13。n没有移动的静态三个js并不有趣要查看nprisoner849查看此示例:MotionAlongCurve 24n我看到一个类-CurveModifier.n从“../jsm/CurveModifier.128.js”导入{Flow}”n这是一个自行编写的类吗?n我明白了。我理解。我只是说。gsap是一个简单的替代方案,您可以将gsap与threejs结合起来。例如。最后一部分(页面底部)是两个聚光灯循环。n通过gsap,您可以执行如下操作:n–位置变化的随机示例–ngsap.to(聚光灯1.位置{持续时间:3,延迟:0,x:2});ngsap.to(聚光灯1.位置{持续时间:3,延误:3,z:-6});ngsap.to(聚光灯1.位置{持续时间:3,延误:6,y:5});ngsap.to(聚光灯1.旋转,1,{y:网格旋转.y+数学圆周率*2});n你可以把它和公式结合起来,做任何你能想象的组合,例如:n常数3));n嗯……对于“床单人”,我认为是一个用搅拌机制作的模型,然后被克隆,然后走路的动画在动画中播放行走的混合器。位置的变化是随机的,但你必须设置一个条件来检查每个位置的近似值,以避免发生碰撞,另一种方法是使用物理,将其他位置推向另一个随机方向。场景已启用雾和阴影。地面是一个具有纹理和高度贴图的平面,水是一个着色器。n对不起,我知道我的英语不好nGsap不适合复杂的路径,例如带有曲线的路径。请看:Three.js及Gsap.js运动路径问题所以在gsap论坛上发布后,运动路径插件显然不能很好地使用three.js所以我会留下我的评论对于任何有同样问题并希望找到替代解决方案的人,都可以使用gsap:MotionPathPlugin并不是专门为其设计的three.js现在。以后可能会有。使用这种代理方法是不准确的,因为插件实际上只处理2d中的位置和旋转three.js已经提供了…n见prisoner849的回复n霍夫在那里有一些很好的例子n这里有一支我也在玩的钢笔:n也许是我仍然认为的原因gsap是一个很好的选择,因为我还没有遇到足够复杂的东西,无法复制它。事实上,我只在简单的模式中使用过gsap。但是,例如,prisioner849的例子可以用gsap和数学公式复制。无论如何,也许你是对的,毕竟我没有多少时间开始学习三个js:3邪恶的谷歌:n我看到一个类-CurveModifier。n从“../jsm/CurveModifier.128.js”导入{Flow}n这是一个自编的类吗?n否,请参阅源代码提示n;nthree.js/webgl_修饰符_曲线.html地址:d4aa9e00ea29808534a3e082f602c544e5f2419c·mrdoob/three.js·GitHub 7nthree.js示例19示例中有一个编辑器。拥有此样条线后,可以使用变换动画移动对象,并从样条线导出的向量进行位置旋转n Animation. Move object along complex pathsn

three.js动画。沿复杂路径移动对象 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e5%8a%a8%e7%94%bb%e3%80%82%e6%b2%bf%e5%a4%8d%e6%9d%82%e8%b7%af%e5%be%84%e7%a7%bb%e5%8a%a8%e5%af%b9%e8%b1%a1/