/r3f-portfolio

My portfolio using R3F

Primary LanguageJavaScript

R3F Portfolio

Model

https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/macbook/model.gltf

Libraries

  • React
  • React Three Fiber
  • drei
  • Leva
  • r3f-perf

Follow of working

  • Create a R3F project
  • Find or create a model
  • Change the background's color
  • Using drei to import that model into portfolio
  • Change the "Environment" to have the light and the reflection on laptop screen
  • has the float animation
  • Instead of using , we use to have a better control of the camera (it lets you manipulate the model instead of the camera)
  • touch-action of need setting to "none" to prevent the scrolling of the page
  • Use
  • Put the <iframe> to display the website on laptop screen
  • Use the inside the float to have the light from the screen