0

I'm simply trying to add a model with a diffuse and bump texture to a simple scene in react 3 fiber.

I have literally no clue what I'm doing wrong.

Heres the sandbox: https://codesandbox.io/s/three-point-lighting-in-react-three-fiber-forked-qeqlx?file=/src/index.js

The model is a GLTF moon, that has the textures baked in. The moon is just a sphere but I want to use the GLTF model. Currently, the scene displays the background and lights, but no model.

If you have any insight about this I would appreciate it immensely!

  • Your codesandbox link isn't compiling correctly. I'm getting this error: `App suspended while rendering, but no fallback UI was specified.` – M - Nov 17 '20 at 23:22
  • remove lines 92 and 101-103 and it will work. Im trying to add a model to the scene but it doesn't seem to work. –  Nov 17 '20 at 23:52
  • Please make sure your example code runs so others can help you. See here: https://stackoverflow.com/help/minimal-reproducible-example – M - Nov 18 '20 at 00:08

2 Answers2

0

At first glance, it looks like you're importing GLTFLoader and moon, but you're never using them. That's what those squiggly yellow lines mean: enter image description here

Make sure you implement them as outlined in the documents:

const loader = new GLTFLoader();
loader.load(
    moon,
    function(gltf) {
        scene.add(gltf.scene);
    }
);
M -
  • 26,908
  • 11
  • 49
  • 81
  • 1
    Here's another react-three-fiber project that also uses a loader, could be useful to read through the `components/Model.js` file. Keep in mind this uses an OBJLoader instead, but the structure should all be the same. https://codesandbox.io/s/modest-newton-np1sw?file=/src/components/Model.js – M - Nov 18 '20 at 02:47
  • Thanks for that example, this will help a lot, but I accidentally removed the file after i posted this code sandbox. Here's my actual code sandbox: https://codesandbox.io/s/three-point-lighting-in-react-three-fiber-forked-qeqlx?file=/src/index.js As you can see the Moon model is imported and is added to the scene, but it doesn't display. I tried other models but it doesn't work. –  Nov 18 '20 at 03:14
0

Alright, I figured it out. Thanks to @Marquizzo

Issues:

  1. The .gltf file was not in the correct directory. It needed to be in the public directory since I am using the "npx @react-three/gltfjsx" script.

  2. The .gltf was incredibly large relative to the scene. In Cinema 4d, it is perfectly sized. But in three.js, it was around 99x too large.

  3. The position of the mesh was behind the camera. I had no clue that you could use Orbital Controls to move the camera around and manually find the object. I also positioned the object at [0,0,0].

  4. The template scene I was using was from a tutorial from almost a year ago. So there had been some major developments since then that caused simple bugs on runtime. So I updated the dependencies.

Issues I still have:

  1. Textures aren't loading from the baked-in .gltf file.

I increased the lighting and it seems that the lighting isnt the issue.

Heres the fixed sandbox: fixed

What I learned:

  1. Orbital Controls
  2. Use of OBJLoader
  3. useHelpers like CameraHelper