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;