CODEWITHSUNDEEP
next.jsthree.jsgltfglblendfunc
Roy
Roy

Reputation: 29

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

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:|

enter image description here

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>
        ))}

Upvotes: 0

Views: 256

Answers (1)

teh.fonsi
teh.fonsi

Reputation: 3134

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.

Upvotes: 0

Related Questions