2023年07月29日(土)

スクロールに応じて3Dモデルを回転させる

• 0
• 0
• 1
• 3

Result

See the Pen
3D Model Scroll-Driven Animation (POC) by kachibito (@kachibito)
on CodePen.

表題の通りで、3Dモデル（サンプルでは.glbファイル）を、スクロールに同期させて回転させる、というもの。

3Dモデルを動かすにあたり、ARでお馴染みのmodel-vieweを使用する以外はバニラなコードとなっています。

javascript

const trackAnimationProgress = (animation, cb, precision = 5) => { let progress = 0; const updateValue = () => { if (animation && animation.currentTime) { let newProgress = animation.effect.getComputedTiming().progress * 1; if (animation.playState === "finished") newProgress = 1; newProgress...