Our great sponsors
-
Use the following command to install two libraries the @react-three/fiber and @react-three/drei.
-
Nowadays the browsers are becoming more powerful then in the past and now they can render different complex animations with ease. You might have seen lot of websites rendering 3D model without any performance issues. In this article we are going to use Three.js to render an iPhone model in a React application.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Use the following command to install two libraries the @react-three/fiber and @react-three/drei.
-
For this tutorial we will be using CRA(create-react-app) template. Open your project folder and use the following command to install CRA template.
-
Now to convert any GLTF files to JSX component we will use one simple command line tool called as gltfjsx. As per the documetation the gltfjsx is a small command-line tool that turns GLTF assets into declarative and re-usable react-three-fiber JSX components.
-
NOTE: This gltfjsx command might give you an error if you are using latest NodeJS version. I'm currently using 17.2.0 and this command is working fine. If you face any error please downgrade your NodeJs version and try this code again. You can use tools like nvm to use different versions of the NodeJs.