如何使用JavaScript在滚动上对3D渲染进行动画处理？

Question

我在考虑在苹果网站上像this one一样在scroll上制作一个动画3D渲染。检查元素，很明显，人造3D效果是使用数百张图像制作的，每张图像代表一个特定的帧。

​

​

为了寻找复制这种惊人效果的最佳方法，我找到了这个库，lottie，这是airbnb开发的一个框架，它接受渲染，在adobe after effects上使用插件，并创建包含动画的最终JSON文件。但这并不能说服我，因为不清楚如何在不使用其他框架的情况下将最终的JSON文件合并到您自己的JavaScript代码中。

有上千个基于用户滚动的动画html元素的库，但是没有一个支持‘框架的改变’。问题是，在你看来，获得类似结果的最佳方法是什么，你做过类似的事情吗？

谢谢你们。

Answer 1

试试这个：https://youtu.be/wLUJ9VNzZXo

它拆分成多个帧，并使用滚动魔术根据滚动显示。

const intro = document.querySelector(".intro");
const video = intro.querySelector("video");
const text = intro.querySelector("h1");
//END SECTION
const section = document.querySelector("section");
const end = section.querySelector("h1");

//SCROLLMAGIC
const controller = new ScrollMagic.Controller();

//Scenes
let scene = new ScrollMagic.Scene({
  duration: 9000,
  triggerElement: intro,
  triggerHook: 0
})
  .addIndicators()
  .setPin(intro)
  .addTo(controller);

//Text Animation
const textAnim = TweenMax.fromTo(text, 3, { opacity: 1 }, { opacity: 0 });

let scene2 = new ScrollMagic.Scene({
  duration: 3000,
  triggerElement: intro,
  triggerHook: 0
})
  .setTween(textAnim)
  .addTo(controller);

//Video Animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

scene.on("update", e => {
  scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
  delay += (scrollpos - delay) * accelamount;
  console.log(scrollpos, delay);

  video.currentTime = delay;
}, 33.3);