Plane and gltf model overlapping

Questions
1

Hello, I’m making my first React three fiber project.

I am trying to load a pond gltf model(which has a certain height) on a plane.

The issue is I don’t want to show that excess height. When I move the model position a little below the plane, the pond’s contents are covered by the plane.

Here is a sandbox link showing the issue: link (Refer to the PondModel function)

Any suggestion on how can I resolve the issue?

Thanks

2

could explain a little more what excess height means, or better even make a snapshot and red-circle the problem?

btw small hint, when you have everything inside index.js there is no hot reload, it will browser refresh the whole page. best make App.js, and just createRoot(document.getElementById('root')).render(<App />) in index.

another problem: react-three-fiber is deprecated. the correct namespace is @react-three/fiber and @react-three/drei

3

So the original model looks like this: link, content inside the pond: link
The height I mentioned above is the depth(height) of the model.

I want the model displayed I like this in the scene. But the plane hides the contents of the model.

Any way I can correctly display this?

Thanks

4

i think the best way forward is to prepare the model in blender, to make an actual hole into the surface and fit the pond.

5

Thank you so much for the response.

Now will need to learn to blender or find a new model. :stuck_out_tongue:

6

i only know the basics, blender is a massive software, but it really saves you time later on, even if you can’t model yet you’ll be able to kit bash stuff together or make modifications. also will come in handy when you want to compress and bake models.

7

Oh okay, then I’ll definitely try to modify the existing model.

Anyways its always helpful to learn the basics rather than skipping them completely.