Glb character loaded but only from a distance and is distorted

Questions
1
My first three.js app body { margin:0; } canvas { width: 50%; height: 50%; } 
</head>
<body>
   
<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<div>
<canvas id="myCanvas" ></canvas>

<script>


var renderer,
	scene,
	camera,
	myCanvas = document.getElementById('myCanvas');

//RENDERER
renderer = new THREE.WebGLRenderer({
  canvas: myCanvas, 
  antialias: true, alpha: true 
});
renderer.setClearColor(0x999998);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

//CAMERA
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000 );

//SCENE
scene = new THREE.Scene();

//LIGHTS
var light = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(light);

var light2 = new THREE.PointLight(0xffffff, 0.6);
scene.add(light2);


var loader = new THREE.GLTFLoader();

loader.load('bone.glb', handle_load);

var mesh;

function handle_load(gltf) {

    console.log(gltf);
    mesh = gltf.scene;
    console.log(mesh.children[0]);
    mesh.children[0].material = new THREE.MeshLambertMaterial();
	scene.add( mesh );
    mesh.position.z = -60;
    var model = gltf.scene;
                scene.add(model);

                mixer = new THREE.AnimationMixer(model);
                mixer.clipAction(gltf.animations[0]).play();

                render();
}


//RENDER LOOP
render();

var delta = 0;
var prevTime = Date.now();

function render() {

    delta += 0.1;

    if (mesh) {
    
        mesh.rotation.y += 0.02;

        //animation mesh
        // mesh.morphTargetInfluences[ 0 ] = Math.sin(delta) * 20.0;
    }

    undefined, function ( error ) 
        {
       console.error( error );
        }

	renderer.render(scene, camera);

	requestAnimationFrame(render);
}

</script>
</body>
2

Can you share a screenshot of the distortion? And if possible, can you share the bone.glb file here?

3

look I added an OrbitControl to be able to see it from different angles and when I approach it it gets distorted too I checked it on a gltf online viewing site (https://gltf-viewer.donmccurdy.com/) and the same happens I would like to know if the problem it’s in the code or the character

follow the link where the .glb character is

https://drive.google.com/open?id=1V6IejAaRAqDHtPS-KwiRc7f6MoTFc5F5

I thank you for your contribution

boneca de perto
boneca de perto923×653 15.9 KB
boneca de perto
boneca de perto1010×648 13.3 KB

4

the project is this way

[image]