Cannot render glb file in frontend, instead it showing a black image

Question

I am trying to call the glb file from the backend server just like I did with the 2d image, how to modify the code if it is glb file and I can interact with the glb rendered image, redult coming is black image

{!!images?.length &&
        images.map((link) => (
          <div key={link} className="h-24 bg-white p-4 shadow-sm rounded-sm border border-gray-200">
            {link.endsWith(".glb") ? (
              <div>Sorry GLB File</div>
            ) : (
              <img src={link} alt="" className="rounded-lg" />
            )}
          </div>
        ))}

Result coming:|

I have just written "sorry glb file" as text as I am failing to render the image in the frontend

I am expecting to render the GLB image in frontend like this 'https://dix1y.csb.app/'

     const GLBModelRenderer = ({ link }) => {
      const canvasRef = useRef(null);

useEffect(() => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  canvasRef.current.appendChild(renderer.domElement);

  const loader = new GLTFLoader();
  const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/'); 
loader.setDRACOLoader(dracoLoader); 

  loader.load(
    link,
    (gltf) => {
      scene.add(gltf.scene);
      camera.position.z = 5;

      const animate = function () {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };

      animate();
    },
    (xhr) => {
      console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
    },
    (error) => {
      console.error('Error loading GLB model:', error);
    }
  );

  return () => {
    // Clean up resources
    renderer.dispose();
  };
}, [link]);

      return <div ref={canvasRef} />;
      };



       return (

     {!!images?.length &&
        images.map((link) => (
          <div key={link} className="h-24 bg-white p-4 shadow-sm rounded-sm border border-gray-200">
            {link.endsWith(".glb") ? (
              <GLBModelRenderer link={link} />
            ) : (
              <img src={link} alt="" className="rounded-lg" />
            )}
          </div>
        ))}

So many options here... But in my experience, its usually because your placed the camera in the wrong position (or you haven't moved it all), which means in all likelihood you are just not seeing the rendered thing because its not in view... — somethinghere, Jul 06 '23 at 12:39

score 0 · Answer 1 · answered Jul 13 '23 at 11:59

There is already a quite extensive answer on how to create an image from a threejs scene: Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image?

I'm using this code on https://www.flowkit.app/ to render the scene as an image (jpg or png):

const type = transparent ? 'png' : 'jpeg';
var strMime = 'image/' + type;
const image = this._renderer.domElement.toDataURL(strMime);

where this._renderer is an instance of WebGLRenderer.

Cannot render glb file in frontend, instead it showing a black image

1 Answers1