Why is the 3D model not displayed correctly in threejs?

Questions
, , , ,
1

Hello, I am new and started to learn three.

I am trying to implement a Saturn model on the web with the help of three and @react-three/fiber. I managed to display Saturn, but I have two problems:

  1. The rendering of the planet itself is problematic and the image jumps and crashes like old televisions.
    1. The ring is not displayed and it is displayed only if I rotate the planet itself, and in that case the rings are elongated.
      Sphere.js 
import React, { useRef } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useFrame, useLoader } from "@react-three/fiber";

const Sphere = () => {
  const planet = useRef();

  const { nodes } = useLoader(GLTFLoader, "files/models/saturn.glb");

  useFrame(() => (planet.current.rotation.y += 0.0002));
  React.useEffect(()=>{
    console.log(nodes)
  })
  return (
    <>
      {/* */}
      <mesh castShadow receiveShadow  geometry={nodes.RingsTop.geometry} material={nodes.RingsTop.material} />
      <mesh castShadow receiveShadow
        ref={planet}
        visible
        position={[0, 0, 0]}
        // Adding data from Saturn001.glb to the geometry and material of the sphere
        geometry={nodes.Saturn001.geometry}
        material={nodes.Saturn001.material}
      />
      <mesh castShadow receiveShadow geometry={nodes.RingsBottom.geometry} material={nodes.RingsBottom.material} /> 
    </>
  );
};

export default Sphere;

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import CameraControls from "../../camera"
import Sphere from "./Sphere";
import SkyBox from "../../skyBox";

export default function SATURN() {
  return (
      <Canvas className="canvas">
        <CameraControls />
        <directionalLight intensity={1} />
        <ambientLight intensity={0.6} />
        <Suspense fallback="loading">
          <Sphere />
        </Suspense>
        <SkyBox />
      </Canvas>
  );
}

2

2

best make a quick codesandbox, there is nothing wrong with the code *. it must be the model itself. i am guessing normals are upside down or something like that. i don’t know what i am seeing in that gif, looks like you are spinning the planet, not the rings, but i need to see it running.

* except Suspense fallback="loading". this is the same as scene.add(“loading”). dom nodes can receive text, threejs objects can’t.

3

I put it in codesandbox. I don’t understand why the planet is displayed correctly in codesandbox and the only problem is those rings. But both of them have problems in my system. I pasted my code without any changes. :thinking:
unruffled-platform-09over - CodeSandbox

4

everything is ok, your model was just huge, so big that it cut through the clipping defaults.

btw you dont need to implement orbitcontrols yourself, or the cubemap. drei has lots of helpers that make this stuff really easy. the whole box reduced into just a couple of lines.

you’re also spinning the planet around the y axis, but since the texture is uniform it’s not really visible.

1 Like
5

ps threejs discourse is mostly about math, webgl and specifically threejs, for things that lean more into react than three you’d get help quicker here: https://discord.gg/poimandres

1 Like
6

Thank you for your help

1 Like