Added support for rendering 3d NFTs

.changeset/flat-birds-march.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Added support for displaying 3d model NFTs

packages/react/package.json

@@ -102,6 +102,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@google/model-viewer": "^2.1.1",
     "@react-icons/all-files": "^4.1.0",
     "@safe-global/safe-core-sdk": "^3.2.0",
     "@safe-global/safe-ethers-adapters": "0.1.0-alpha.13",

packages/react/src/evm/components/MediaRenderer.tsx

@@ -9,9 +9,19 @@ import {
   CarbonPlayFilledAlt,
 } from "./Icons";
 import { useQuery } from "@tanstack/react-query";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  lazy,
+  Suspense,
+} from "react";
 import useDimensions from "react-cool-dimensions";
 
+const ModelViewer = lazy(() => import("./ModelViewer"));
+
 export interface SharedMediaProps {
   className?: string;
   style?: React.CSSProperties;
@@ -25,6 +35,8 @@ export interface SharedMediaProps {
    * Show the media controls (where applicable) (default false)
    */
   controls?: HTMLVideoElement["controls"];
+
+  children?: ReactNode;
 }
 
 /**
@@ -45,6 +57,8 @@ export interface MediaRendererProps extends SharedMediaProps {
    * The media poster image uri. (if applicable)
    */
   poster?: string | null;
+  width?: string;
+  height?: string;
 }
 
 interface PlayButtonProps {
@@ -399,6 +413,7 @@ LinkPlayer.displayName = "LinkPlayer";
  * This component can be used to render any media type, including image, audio, video, and html files.
  * Its convenient for rendering NFT media files, as these can be a variety of different types.
  * The component falls back to a external link if the media type is not supported.
+ * The default size is 300px by 300px, but this can be changed using the `width` and `height` props.
  *
  * Props: {@link MediaRendererProps}
  *
@@ -420,10 +435,10 @@ export const MediaRenderer = React.forwardRef<
   MediaRendererProps
 >(
   (
-    { src, poster, alt, requireInteraction = false, style, ...restProps },
+    { src, poster, alt, requireInteraction = false, width = "300px", height = "300px", style, ...restProps },
     ref,
   ) => {
-    const mergedStyle: React.CSSProperties = { objectFit: "contain", ...style };
+    const mergedStyle: React.CSSProperties = { objectFit: "contain", width, height, ...style };
     const videoOrImageSrc = useResolvedMediaType(src ?? undefined);
     const possiblePosterSrc = useResolvedMediaType(poster ?? undefined);
     if (!videoOrImageSrc.mimeType) {
@@ -445,6 +460,30 @@ export const MediaRenderer = React.forwardRef<
           {...restProps}
         />
       );
+    } else if (videoOrImageSrc.mimeType.startsWith("model")) {
+      return (
+        <Suspense
+          fallback={
+            poster ? (
+              <img
+                style={mergedStyle}
+                src={poster}
+                alt={alt}
+                ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
+                {...restProps}
+              />
+            ) : null
+          }
+        >
+          <ModelViewer
+            style={mergedStyle}
+            src={videoOrImageSrc.url || ""}
+            poster={poster}
+            alt={alt}
+            {...restProps}
+          />
+        </Suspense>
+      );
     } else if (shouldRenderVideoTag(videoOrImageSrc.mimeType)) {
       return (
         <VideoPlayer

packages/react/src/evm/components/ModelViewer.tsx

@@ -0,0 +1,34 @@
+import type { MediaRendererProps } from "./MediaRenderer";
+import "@google/model-viewer";
+import type { ModelViewerElement } from "@google/model-viewer";
+import React from "react";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "model-viewer": Partial<ModelViewerElement>;
+    }
+  }
+}
+
+export const ModelViewer = React.forwardRef<HTMLDivElement, MediaRendererProps>(
+  ({ src, alt, poster, style }, ref) => {
+    return (
+      <div style={{ ...style }} ref={ref}>
+        {src ? (
+          <model-viewer
+            src={src}
+            alt={alt || "3D Model"}
+            camera-controls
+            poster={poster ? poster : null}
+            style={{ width: '100%', height: '100%'} as CSSStyleDeclaration}
+          />
+        ) : null}
+      </div>
+    );
+  },
+);
+
+ModelViewer.displayName = "ModelViewer";
+
+export default ModelViewer;

packages/react/src/evm/components/NftMedia.tsx

@@ -10,10 +10,15 @@ export interface ThirdwebNftMediaProps extends SharedMediaProps {
    * The NFT metadata of the NFT returned by the thirdweb sdk.
    */
   metadata: NFTMetadata;
+  width?: string;
+  height?: string;
 }
 
 /**
  * This component can be used to render NFTs from the thirdweb SDK.
+ * It will render the animation_url if it exists, otherwise it will render the image.
+ * The default size is 300px by 300px, but this can be changed using the `width` and `height` props.
+ * 
  * Props: {@link ThirdwebNftMediaProps}
  *
  * @example
@@ -38,13 +43,16 @@ export interface ThirdwebNftMediaProps extends SharedMediaProps {
 export const ThirdwebNftMedia = React.forwardRef<
   HTMLMediaElement,
   ThirdwebNftMediaProps
->(({ metadata, ...props }, ref) => {
+  >(({ metadata, width = "300px", height = "300px", style, ...props }, ref) => {
   return (
     <MediaRenderer
       src={metadata.animation_url || metadata.image}
       poster={metadata.image}
       alt={metadata.name?.toString() || ""}
       ref={ref}
+      width={width}
+      height={height}
+      style={{ ...style }} 
       {...props}
     />
   );