Broken textures while importing glb model

Questions
, , ,
1

Hi all. I am very new to Three JS.

I’m trying to import the glb file with this simple code:


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

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });

renderer.setSize(300, 300);
renderer.setClearColor(0x000000, 0); 
document.getElementById('welcome-canvas').appendChild(renderer.domElement);

const light = new THREE.DirectionalLight(0xffffff, 5);
light.position.set(1, 1, 1).normalize();
scene.add(light);

const loader = new GLTFLoader();
loader.load('/models/three/scene.glb', function(gltf) {
    const model = gltf.scene; 
    scene.add(model);
    console.log('Success: ', model);  

    function animate() {
        requestAnimationFrame(animate);
        model.rotation.y += 0.01; 
        renderer.render(scene, camera);
    }
    animate();
}, undefined, function(error) {
    console.log('Error', error);
});

camera.position.z = 15;

This .glb file looks correct in 3D editor and when I open it on three.js editor

Screenshot 2024-07-01 at 2.46.43 PM
Screenshot 2024-07-01 at 2.46.43 PM1172×742 138 KB

When I import it using the code above, or any other import way (I tried with gltf files, spine object) it always shows like this, textures are never smooth

Screenshot 2024-07-01 at 2.48.34 PM
Screenshot 2024-07-01 at 2.48.34 PM492×522 97.7 KB

Do you know how can I make it looking like in three.js editor?

2

Perhaps your camera near/far planes are too far apart? Try to bring those close enough to bound the object more tightly. This makes better use of the depth buffer’s limited precision. Just a guess, though. If you still need help with this, would it be possible to share a demo with code reproducing the issue?