, the react-pdf library exposes the Document and Page components:We can install to our project:Before we put react-pdf to use, we will need to set up a service worker for pdf.js to process time-consuming tasks such as parsing and rendering a PDF document.Now, we can import the Document and Page components, passing the PDF file to their props. We can also import the component’s necessary styles while we are at it.Since accessing the PDF will change the current page, we can add state management by passing the current pageNumber to the Page component:One issue is that we have pagination but don’t have a way to navigate between pages. We can change that by adding controls. First, we will need to know the number of pages in the document, which is accessed on the Document component’s onLoadSuccess event:Next, we display the current page number and add “Next” and “Previous” buttons with their respective handlers to change the current page:This provides us with everything we need to embed a PDF file on a page via the HTML element using react-pdf and pdf.js.There is another similar package capable of embedding a PDF file in a viewer, complete with pagination controls. We’ll look at that next.Unlike react-pdf, the react-pdf-viewer package provides built-in customizable controls right out of the box, which makes embedding a multi-page PDF file a lot easier than having to import them separately.Let’s install it:Since react-pdf-viewer also relies on pdf.js, we will need to create a service worker as we did with react-pdf, but only if we are not using both packages at the same time. This time, we are using a Worker component with a workerUrl prop directed at the worker’s package.Note that a worker like this ought to be set just once at the layout level. This is especially true if you intend to use the PDF viewer across different pages.Next, we import the Viewer component with its styles and point it at the PDF through its fileUrl prop.Once again, we need to add controls. We can do that by importing the defaultLayoutPlugin (including its corresponding styles), making an instance of it, and passing it in the Viewer component’s plugins prop.Again, react-pdf-viewer is an alternative to react-pdf that can be a little easier to implement if you don’t need full control over your PDF files, just the embedded viewer.There is one more plugin that provides an embedded viewer for PDF files. We will look at it, but only briefly, because I personally do not recommend using it in favor of the other approaches we’ve covered.The last plugin we will check out is react-file-viewer, a package that offers an embedded viewer with a simple interface but with the capacity to handle a variety of media in addition to PDF files, including images, videos, PDFs, documents, and spreadsheets.While react-file-viewer will get the job done, it is extremely outdated and could easily create more headaches than it solves with compatibility issues. I suggest avoiding it in favor of either an iframe, react-pdf, or react-pdf-viewer.I want to cap this brief two-part series with one more media type that might cause headaches in a Gatsby project: 3D models.A 3D model file is a digital representation of a three-dimensional object that stores information about the object’s geometry, texture, shading, and other properties of the object. On the web, 3D model files are used to enhance user experiences by bringing interactive and immersive content to websites. You are most likely to encounter them in product visualizations, architectural walkthroughs, or educational simulations.There is a multitude of 3D model formats, including glTF OBJ, FBX, STL, and so on. We will use glTF models for a demonstration of a headache-free 3D model implementation in Gatsby.The GL Transmission Format (glTF) was designed specifically for the web and real-time applications, making it ideal for our example. Using glTF files does require a specific webpack loader, so for simplicity’s sake, we will save the glTF model in the /static folder at the root of our project as we look at two approaches to create the 3D visual with Three.js:Three.js creates and loads interactive 3D graphics directly on the web with the help of WebGL, a JavaScript API for rendering 3D graphics in real-time inside HTML elements.Three.js is not integrated with React or Gatsby out of the box, so we must modify our code to support it. A Three.js tutorial is out of scope for what we are discussing in this article, although excellent learning resources are available in the Three.js documentation.We start by installing the three library to the Gatsby project:Next, we write a function to load the glTF model for Three.js to reference it. This means we need to import a GLTFLoader add-on to instantiate a new loader object.We use the scene object as a parameter in the loadModel function so we can attach our 3D model once loaded to the scene.From here, we use loader.load() which takes four arguments:Let’s create a component to host the scene and load the 3D model. We need to know the element’s client width and height, which we can get using React’s useRef hook to access the element’s DOM properties.Since we are using the element’s clientWidth and clientHeight properties, we need to create the scene on the client side inside React’s useEffect hook where we configure the Three.js scene with its necessary complements, e.g., a camera, the WebGL renderer, and lights.Now we can invoke the loadModel function, passing the scene to it as the only argument:The last part of this vanilla Three.js implementation is to add OrbitControls that allow users to navigate the model. That might look something like this:That is a straight Three.js implementation in a Gatsby project. Next is another approach using a library.react-three-fiber is a library that integrates the Three.js with React. One of its advantages over the vanilla Three.js approach is its ability to manage and update 3D scenes, making it easier to compose scenes without manually handling intricate aspects of Three.js.We begin by installing the library to the Gatsby project:Notice that the installation command includes the @react-three/drei package, which we will use to add controls to the 3D viewer.I personally love react-three-fiber for being tremendously self-explanatory. For example, I had a relatively easy time migrating the extensive chunk of code from the vanilla approach to this much cleaner code:Thanks to react-three-fiber, we get the same result as a vanilla Three.js implementation but with fewer steps, more efficient code, and a slew of abstractions for managing and updating Three.js scenes.The last thing I want to leave you with is two final considerations to take into account when working with media files in a Gatsby project.Importing an asset as a module so it can be bundled by webpack is a common strategy to add post-processing and minification, as well as hashing paths on the client. But there are two additional use cases where you might want to avoid it altogether and use the static folder in a Gatsby project:You can find a detailed explanation of the static folder and use it to your advantage in the Gatsby documentation.Secondly, you can never be too cautious when embedding third-party services on a website. Replaced content elements, like