Question 216447 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – GLTF not converted properly

So i ve been messing aroud with threejs in react. I found out that the way to display 3d objects in react is turning the into a JSX Component by using gltfjsx . I followed everything, i even tried it with both glb and gltf files. I load my model, eveything seems to be working fine , but i can’t see anything in my screen.

At a point after some tries i realised there was something on my screen but really small , and when i changed the camera to see it upclose, my model was completely distorted.

Then i tried an add on ,on Visual Studio, that basically turned my gltf in a form of a JSON file , while still a .gltf file. But that didnt work either

App.js

import { Canvas } from "@react-three/fiber";
import { Model } from "./Model";

function App() {
  return (
    <>
      <Canvas>
        <Suspense fallback={<LoadingFallback />}>
          <Model position={[0, 0, 0]} />
        </Suspense>
      </Canvas>
    </>
  );
}

function LoadingFallback() {
  return (
    <mesh visible position={[0, 0, 0]}>
      <sphereGeometry args={[1, 16, 16]} />
      <meshStandardMaterial color="red" />
    </mesh>
  );
}

export default App;

Model.jsx

import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";

export function Model(props) {
  const { nodes, materials } = useGLTF("model.gltf");
  return (
    <group {...props} dispose={null}>
      <mesh
        geometry={nodes.mesh_0.geometry}
        material={nodes.mesh_0.material}
        position={[-0.059, 0, 0.056]}
        rotation={[-Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.mesh_1.geometry}
        material={nodes.mesh_1.material}
        position={[-0.059, 0, 0.056]}
        rotation={[-Math.PI / 2, 0, 0]}
      />
    </group>
  );
}

useGLTF.preload("/model.gltf");

model.gltf

{
  "asset": {
    "generator": "3D Builder",
    "version": "2.0"
  },
  "scene": 0,
  "scenes": [
    {
      "nodes": [
        0,
        1
      ]
    }
  ],
  "nodes": [
    {
      "mesh": 0,
      "matrix": [
        1,
        0,
        0,
        0,
        0,
        -1.1920928955078125e-7,
        -0.9999998807907104,
        0,
        0,
        0.9999998807907104,
        -1.1920928955078125e-7,
        0,
        -0.0589279979467392,
        6.676553532258822e-9,
        0.056006982922554016,
        1
      ]
    },
    {
      "mesh": 1,
      "matrix": [
        1,
        0,
        0,
        0,
        0,
        -1.1920928955078125e-7,
        -0.9999998807907104,
        0,
        0,
        0.9999998807907104,
        -1.1920928955078125e-7,
        0,
        -0.0589279979467392,
        6.676553532258822e-9,
        0.056006982922554016,
        1
      ]
    }
  ],
  "meshes": [
    {
      "primitives": [
        {
          "attributes": {
            "POSITION": 0,
            "COLOR_0": 1
          },
          "mode": 4,
          "indices": 2
        }
      ]
    },
    {
      "primitives": [
        {
          "attributes": {
            "POSITION": 3,
            "COLOR_0": 4
          },
          "mode": 4,
          "indices": 5
        }
      ]
    }
  ],
  "accessors": [
    {
      "bufferView": 0,
      "byteOffset": 0,
      "count": 86,
      "componentType": 5126,
      "type": "VEC3",
      "min": [
        0.049275994300842285,
        -1.3066596265629834e-16,
        0
      ],
      "max": [
        0.1178559958934784,
        0.08991597592830658,
        0.018389593809843063
      ]
    },
    {
      "bufferView": 1,
      "byteOffset": 0,
      "count": 86,
      "componentType": 5121,
      "type": "VEC4",
      "normalized": true
    },
    {
      "bufferView": 2,
      "byteOffset": 0,
      "count": 504,
      "componentType": 5125,
      "type": "SCALAR"
    },
    {
      "bufferView": 3,
      "byteOffset": 0,
      "count": 120,
      "componentType": 5126,
      "type": "VEC3",
      "min": [
        0,
        -1.3066596265629834e-16,
        0
      ],
      "max": [
        0.09220199286937714,
        0.11201398074626923,
        0.018389593809843063
      ]
    },
    {
      "bufferView": 4,
      "byteOffset": 0,
      "count": 120,
      "componentType": 5121,
      "type": "VEC4",
      "normalized": true
    },
    {
      "bufferView": 5,
      "byteOffset": 0,
      "count": 708,
      "componentType": 5125,
      "type": "SCALAR"
    }
  ],
  "bufferViews": [
    {
      "buffer": 0,
      "byteOffset": 0,
      "byteLength": 1032,
      "byteStride": 12,
      "target": 34962
    },
    {
      "buffer": 0,
      "byteOffset": 1032,
      "byteLength": 344,
      "byteStride": 4,
      "target": 34962
    },
    {
      "buffer": 0,
      "byteOffset": 1376,
      "byteLength": 2016,
      "target": 34963
    },
    {
      "buffer": 0,
      "byteOffset": 3392,
      "byteLength": 1440,
      "byteStride": 12,
      "target": 34962
    },
    {
      "buffer": 0,
      "byteOffset": 4832,
      "byteLength": 480,
      "byteStride": 4,
      "target": 34962
    },
    {
      "buffer": 0,
      "byteOffset": 5312,
      "byteLength": 2832,
      "target": 34963
    }
  ],
  "buffers": [
    {
      "uri": "model_data.bin",
      "byteLength": 8144
    }
  ]
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    So i tried a more traditional approach with two examples to verify if the problem is my model.

    import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";

export default function Logo() {
  const logo = useGLTF("model.gltf");

  return (
    <>
      <primitive object={logo.scene} />
    </>
  );
}

    import { Canvas } from "@react-three/fiber";
import Logo from "./Logo";

function App() {
  return (
    <>
      <Canvas>
        <Suspense fallback={<> Loading...</>}>
          <Logo />
        </Suspense>
      </Canvas>
    </>
  );
}

export default App;

    I tried with two different gltfs and the other one worked fine, so the problem is my model. I realised there was an error with my gltf, i followed chat's suggestions to fix it, i get no error now, but my object still not showing.

    For reference puproses the error i got was

    Could not load model.gltf: Invalid typed array length: 504)
    at http://localhost:3000/static/js/bundle.js:2223:36
    at _onError (http://localhost:3000/static/js/bundle.js:60449:9)
    ```

  2. 0

    I believe you need the camera prop as well

    <Canvas 
      camera={
      //Set the parameters here like position, rotation
    }>
    <Suspense fallback={<LoadingFallback />}>
      <Model position={[0, 0, 0]} />
    </Suspense>
  </Canvas>

    Or you can also try creating your own perspective or orthographic camera.
    React Drei Documentation

    Login or Signup to reply.
  3. 0

    What i did was, exporting my model from WebGI cause it seemed as if there was a problem with the quality of my model. Once i did that, my object had a normal size and i could work on it properly

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search