Loading a geometry from a gltf file

Questions
,
1

Hi,

I got three mesh in a gltf file. I would like to load the geometry of one of them in order to change the color manually:

const Bb = () => {
  const { nodes } = useLoader(GLTFLoader, "/low_poly_earth.gltf");
  console.log(nodes);
  return (
    <mesh geometry={nodes.mesh_0.material}>
      <meshStandardMaterial color="#ff0000" transparent opacity={0.5} />
    </mesh>
  );
};

The structure of the glft file should be ok:

image
image937×102 10.7 KB

but I got a bunch of errors and nothing is rendered. I am new to 3d object file format and I confess I didn’t look around on internet to know how it works but I won’t have to do this kind of work for a while and it’s quite technical.

my code sandbox is here : template_shader - CodeSandbox

The function concerned is inside meshPlanet.js and the gltf file is low_poly_earth.gltf (inside Public folder).

How can I render the geometry inside the gltf ? What is the uri file in it ?

2

you’re passing it a material as the geometry geometry={nodes.mesh_0.material} three will complain for sure. you most likely mean geometry={nodes.mesh_0.geometry}.

keep in mind that nobody will ever console.log through a models scene and fish out nodes, that would be way too much work. if you want to make changes to the file you will in practically all cases use gltfjsx GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components and that has the benefit of compressing your file, it is a bad idea to use gltf on the web, you might want to use glb:

npx gltfjsx lowpolyearth.gltf --transform

it will create two files:

  • lowpolyearth-transformed.glb, a compressed version of the model
  • Lowpolyearth.jsx, the models full JSX scene graph
2 Likes