pmndrs / gltf-react-three Goto Github PK

I dropped a glb file from a folder as the application loaded and It crashed.

these are the errors that are displayed in the console

EDIT: Was a simple alpha blending issue. closed

When uploading a model with an animation, the app gets stuck on "loading..." and the console shows the error:

Uncaught (in promise) TypeError: e.targetNames is undefined

The error seems to be coming from here in gltfjsx:
https://github.com/pmndrs/gltfjsx/blob/2696fd69e48c9d4e7b04454870f37f379d0fabc3/src/utils/parser.js#L71

The error does not occur when running the gltfjsx CLI so I think there is some error handling missing from gltf-react-three. What's strange is that I can only see one usage of gltfjsx in this repo and that line appears to be running correctly. I added some log statements to result.js:

console.log('trying result')
const result = await new Promise((resolve, reject) => gltfLoader.parse(buffer, '', resolve, reject))
console.log('finished result', result)

and it prints a result with animations included before throwing the error. I'm not sure why the error happens after parsing is completed.

Attached is a sample file of a cube with a simple position animation.
animated-cube.zip

Bad suzzane

The initial screen would be

Drag 'n' drop your GLTF file here
or try with Suzanne

and it would let you use a provided gltf (I mention suzanne but whatever is CC)

I'd add a tiny footer with poimandres logo, a link to the gltfjsx cli - and your personal credit @SaraVieira, if you want

Hello,

When I drag and drop my gltf file into gltf.pmdrs.rs, I get this error in the console

Uncaught (in promise) Error: THREE.GLTFLoader: Failed to load buffer "Hertbeat.bin".

and on the top of the screen all I see is "Loading..." - I assume because of that console error

any ideas? I am definitely trying to drop the gltf file in and not the bin file

EDIT fixed by #17

Gltf loader isn't set for KTX2 textures and Meshopt decoders

Uncaught (in promise) Error: THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2 textures
Uncaught (in promise) Error: THREE.GLTFLoader: setMeshoptDecoder must be called before loading compressed files

i am getting these errors when i try to upload a glb file compressed with gltfpack.

Hey,

Great work on this project.

I just wanted to let you know that when you select the instance all option the jsx code doesn't work in the sandbox and therefore in my project either. The error returned is the following:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of InstancedModel.

Not sure if this is possible, but I feel like it would.

It would be ${url}?file=/src/Model.js instead of ${url}

I get this error in the console when using gltf.pmnd.rs:

Uncaught (in promise) SyntaxError: Unexpected token (17:5)

Hello thanks for building this project. Is there any way to trigger animations from the gltf data? Any documentation I'm missing?

Hi ! Thanks for this awesome tool !

I have an error when generated components with "types" option (on all my models) using .tsx files :

Conversion of type 'GLTF & ObjectMap' to type 'GLTFResult' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'GLTF & ObjectMap' is not comparable to type '{ nodes: { Mesh_wave_C: Mesh<BufferGeometry, Material | Material[]>; Mesh_wave_C_1: Mesh<BufferGeometry, Material | Material[]>; }; materials: { ...; }; }'.
    Types of property 'nodes' are incompatible.
      Type '{ [name: string]: Object3D<Event>; }' is missing the following properties from type '{ Mesh_wave_C: Mesh<BufferGeometry, Material | Material[]>; Mesh_wave_C_1: Mesh<BufferGeometry, Material | Material[]>; }': Mesh_wave_C, Mesh_wave_C_1

Is moving from this: const { nodes, materials } = useGLTF("/models/tree.glb") as GLTFResult;
to this: const { nodes, materials } = useGLTF("/models/tree.glb") as unknown as GLTFResult; a good solution?

Thanks 🙏🏻

Because of course

When making a sandbox it may fail because the file is too large so a fallback to download the project as a zip file would be a great addition

Hi!

Love the project.
Just wondering if it's possible to add the missing options like instancing?

Thanks!

Alt-title: scrollbars are evil

This will wrap the component in useForwardRef exposing the ref to additional libs like theatre.js

Is there any relevant API that can support the rotation control effect by passing in the resource link?
Or can the demo code of the controller part be exposed?Especially want to achieve the effect on the document

I am trying to add 3d logo to my projects and on the preview (https://gltf.pmnd.rs/) looks everything fine:

But when I put it on my page the cylinder is longer :

Here is my code: Logo.js

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

export default function Logo(props) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/mylogo.gltf')
  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <mesh
          name="Text"
          castShadow
          receiveShadow
          geometry={nodes.Text.geometry}
          material={materials['Material.002']}
          position={[-0.0674, 1.03191, -0.0501]}
          rotation={[Math.PI / 2, 0, 0]}
          userData={{ name: 'Text' }}
        />
        <mesh
          name="Cylinder"
          castShadow
          receiveShadow
          geometry={nodes.Cylinder.geometry}
          material={materials['Material.001']}
          position={[0.61935, 1.39732, -0.03659]}
          rotation={[Math.PI / 2, 0, 0]}
          userData={{ name: 'Cylinder' }}
        />
      </group>
    </group>
  )
}

useGLTF.preload('/mylogo.gltf')

App.js :

import React, { useState, useRef, Suspense } from "react";
import "./App.scss";
import { softShadows, OrbitControls } from "@react-three/drei";
import { useSpring, a } from "@react-spring/three";
import { Canvas, useFrame } from "@react-three/fiber";
import Logo from "./models/logo";
softShadows();
function App() {
  return (
    <Canvas colorManagment shadows camera={{ position: [-5, 2, 8], fov: 60 }}>
      <ambientLight intensity={0.1} />
      <color attach="background" args={["black"]} />
      <directionalLight
        castShadow
        position={[0, 10, 0]}
        intensity={1.5}
        shadow-mapSize-width={1024}
        shadow-mapSize-height={1024}
        shadow-camera-far={50}
        shadow-camera-left={-10}
        shadow-camera-right={10}
        shadow-camera-top={10}
        shadow-camera-bottom={-10}
      />

      <pointLight position={[-10, 0, -20]} intensity={0.5} />
      <pointLight position={[0, 10, 0]} intensity={0.5} />

      <group>
        <mesh
          rotation={[-Math.PI / 2, 0, 0]}
          position={[0, -3, 0]}
          receiveShadow
        >
          <planeBufferGeometry attach="geometry" args={[100, 100]} />
          <shadowMaterial attach="material" opacity={0.2} color={"white"} />
        </mesh>
      </group>

      <OrbitControls />
      <ambientLight intensity={0.5} />
      <Suspense fallback={<div>Loading... </div>}>
        <Logo />
      </Suspense>
    </Canvas>
  );
}

export default App;

Thanks for help.

The website only allows uploading the single gltf file

and what about the file that comes up with the texture folder and the bin like

• license.txt
• scene.bin
• scene.gltf
• textures
  • Scene_-_Root_baseColor.png
  • xxx.png
  • xxxx.png

I tried droppin scene.gltf into the website
and obviously, it gave me THREE.GLTFLoader: Couldn't load texture textures/Scene_-_Root_baseColor.png

and workaround for this, or do I have to bundle the texture inside the gltf file?