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.