The tag <mesh> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

Question

The tag <mesh> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

27 Views Asked by Yilmaz At 15 March 2024 at 16:31

I have this component in next.js 14

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx [email protected] mystic+ethereum+in+place+vertical.gltf --transform 
Files: mystic+ethereum+in+place+vertical.gltf [133.47MB] > /home/mystic+ethereum/mystic+ethereum+in+place+vertical-transformed.glb [886.29KB] (99%)
*/
"use client";
import { extend } from "@react-three/fiber";

import React, { useRef, useEffect } from "react";
import { useGLTF } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
// this enables animations
import { a } from "@react-spring/three";

// import ethereumScene from "./";

export function Ethereum(props) {
  const ethereumRef = useRef();
  const { nodes, materials } = useGLTF(
    "/mystic+ethereum+in+place+vertical-transformed.glb"
  );
  return (
    //     <a.group {...props} dispose={null}> WE REMOVED dispose={null}

    <a.group {...props}>
      <mesh
        geometry={nodes.mesh_0.geometry}
        material={materials.PaletteMaterial001}
      />
      <mesh
        geometry={nodes.mesh_1.geometry}
        material={materials.PaletteMaterial002}
      />
      <mesh
        geometry={nodes.mesh_2.geometry}
        material={materials.PaletteMaterial003}
      />
    </a.group>
  );
}

useGLTF.preload("/mystic+ethereum+in+place+vertical-transformed.glb");

I render this component in Home page

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24 bg-white">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <>
          <Canvas
            className={`w-full h-screen bg-transparent 
          `}
            camera={{ near: 0.1, far: 1000 }}
          >
            <Suspense fallback={<Loader />}>
              <directionalLight position={[1, 1, 1]} intensity={2} />
              <ambientLight intensity={0.5} />
              <pointLight position={[10, 5, 10]} intensity={2} />
              <spotLight
                position={[0, 50, 10]}
                angle={0.15}
                penumbra={1}
                intensity={2}
              />
              <hemisphereLight
                groundColor="#000000"
                intensity={1}
              />

              {/* <Html> */}
                <Ethereum
                // isRotating={isRotating}
                // setIsRotating={setIsRotating}
                // setCurrentStage={setCurrentStage}
                // position={threeDModelPosition}
                // rotation={[0.1, 4.7077, 0]}
                // scale={threeDModelScale}
                />
              {/* </Html> */}

            </Suspense>
          </Canvas>
        </>
      </div>
    </main>
  );
}

Instead of a.group, i just rendered group did not work
I wrapped mesh with <></> did not work
I wrapped the Ethereum component with Html component
```
 import { Html } from "@react-three/drei";
```

I tried this:

import { a } from "@react-spring/three";
<a.mesh
  geometry={nodes.mesh_0.geometry}
  material={materials.PaletteMaterial001}
/>

Nothing worked

Original Q&A

There are 1 best solutions below

**Yilmaz** · Answer 1 · 2024-03-16T03:57:47.123000

Yilmaz On 16 March 2024 at 03:57

I solved it with dynamic import:

import dynamic from "next/dynamic";

const Ethereum = dynamic(
  () => import("@/components/3D/Ethereum/Ethereum").then((res) => res.default),
  {
    ssr: false,
  }
);

The tag <mesh> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

There are 1 best solutions below

Related Questions in NEXT.JS

Related Questions in THREE.JS

Related Questions in REACT-THREE-FIBER

Related Questions in REACT-THREE-DREI

Related Questions in NEXT.JS14

Trending Questions

Popular # Hahtags

Popular Questions