naver / egjs-view3d

Fast & customizable 3D model viewer for everyone
https://naver.github.io/egjs-view3d
MIT License
199 stars 30 forks source link

question. in react, on initial loading, want to use both zooming and rotating. #68

Open ctxwing opened 1 year ago

ctxwing commented 1 year ago

question. in react, on initial loading, want to use both zooming and rotating. a little bounging in zoom and rotate too. say for this as showup effect. for examle, say on first load,set zoom 0.7, rotate -20 degree.. during 300 ms, want apply both zooming to 1.1 and( ) rotating to 5. then biunce back to zoom 1.0 and rotation 0.

any good way to do this? I really appreciate if you give me a hit. thanks in advance.

WoodNeck commented 1 year ago

Hello @ctxwing You can set initial zoom and camera angles with our options (initialZoom, yaw, pitch, pivot)

After when View3D's ready event is triggered, which means your 3D model is loaded, you can apply animations with view3d.camera.reset(). You can use easing functions for the bouncing effect. I didn't test the below script, but here's a rough way to how.

import View3D, { Pose } from "@egjs/view3d"

const view3D = new View3D(el, {
  initialZoom: 0.7,
  yaw: -20
})

function easeOutBack(x: number): number {
  const c1 = 1.70158;
  const c3 = c1 + 1;

  return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
}

view3D.on("ready", async () => {
  // new pose to change
  await camera.reset(300, easeOutBack, new Pose(0, 0, 1));
});
ctxwing commented 1 year ago

@WoodNeck . sorry for late responding.. thats awesome.. thanks . I will try to appy. thanks again