Newbie: Three.js render is different from SketchFab Demo

Questions
1

I’m new to three.js and wanted to explore 3D web development so, please go easy on me.
I started a simple project just to load the .glb file from the SketchFab library. It successfully loads the 3D modal but it looks different from the demo. Can someone share some thoughts on how to achieve a similar result to the demo?
My Render: Imgur
The Sketchfab: SketchFab
Code:


import { useEffect } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

function App() {
  useEffect(() => {

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 4;
    const canvas = document.getElementById("myThreeJsCanvas");
    const renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true,
    });

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.setClearColor(0x000000, 0);
    document.body.appendChild(renderer.domElement);

    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    ambientLight.castShadow = true;
    scene.add(ambientLight);

    const spotLight = new THREE.SpotLight(0xffffff, 1);
    spotLight.castShadow = true;
    spotLight.position.set(0, 64, 32);
    scene.add(spotLight);
    const loader = new GLTFLoader();

    loader.load('./assets/iczu.glb', function (gltf) {
      gltf.scene.scale.set(2, 2, 2);
      scene.add(gltf.scene);
    }, undefined, function (error) {
      console.error(error);
    });

    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();
  }, []);

  return (
    <div>
      <canvas id="myThreeJsCanvas" />
    </div>
  );
}
export default App;
2

Playing back animation would help somewhat — You can reference this example to see how to play animation in a .glb file.

However, it also looks like the materials used in this Sketchfab scene are not present in the files Sketchfab gives you, or they are dependent on something special in the lighting environment (which is not exported either). Whatever creates the glow/shimmer you see, it is not there in the .glb or the .blend files. I don’t know how to fix that, without starting from scratch and trying to create something similar. Perhaps Sketchfab can add the missing features in their exports, or the artist might be willing to share a little about what techniques are used here.

1 Like
3

I see, the issue is likely to be the files are not complete. I checked the Sketchfab layer panel, the artist might have used the post-processing techniques directly in Sketchfab. I will try something else while waiting for the artist’s response. So far, other 3D models from Sketchfab work as intended.
Thanks donmccurdy for the response.

4

I too keep wondering how things look so good on sketchfab, and how transfer it into Three. If they are supporting standard formats like FBX or GLTF, then it must be possible to do, but seems very difficult to get right in Three.

5

They do export to glTF, and with some limitations, much of the material features their renderer supports will also export to glTF. I would note that their list of “features not supported by the glTF specification” is quite out of date, several of those are supported by glTF but Sketchfab just doesn’t export them.

That said, post-processing does not export to any file format, so that kind of thing you will always need to recreate in your target engine.

6

Here’s the list of post processing options in sketchfab. There are threejs &| r3f equivalents of all these but setting up the exact right combination sounds pretty tricky.