# Glb character loaded but only from a distance and is distorted

**URL:** <https://discourse.threejs.org/t/glb-character-loaded-but-only-from-a-distance-and-is-distorted/14884>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [May 4, 2020, 2:31am UTC](https://discourse.threejs.org/t/glb-character-loaded-but-only-from-a-distance-and-is-distorted/14884 "2020-05-04T02:31:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gabriel\_fernando](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gabriel_fernando/32/10719_2.png) [@gabriel\_fernando](https://discourse.threejs.org/u/gabriel_fernando)\
**Post date:** [May 4, 2020, 2:31am UTC](https://discourse.threejs.org/t/glb-character-loaded-but-only-from-a-distance-and-is-distorted/14884/1 "2020-05-04T02:31:03Z")

</div>

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>

```

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [May 4, 2020, 2:58am UTC](https://discourse.threejs.org/t/glb-character-loaded-but-only-from-a-distance-and-is-distorted/14884/2 "2020-05-04T02:58:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gabriel\_fernando](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gabriel_fernando/32/10719_2.png) [@gabriel\_fernando](https://discourse.threejs.org/u/gabriel_fernando)\
**Post date:** [May 5, 2020, 5:49pm UTC](https://discourse.threejs.org/t/glb-character-loaded-but-only-from-a-distance-and-is-distorted/14884/3 "2020-05-05T17:49:50Z")

</div>

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/](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](https://drive.google.com/open?id=1V6IejAaRAqDHtPS-KwiRc7f6MoTFc5F5)

I thank you for your contribution

 ![boneca de perto](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/e9956424f3a506b8a8fa42eb2e67e35fcbc0158b.png) ![boneca de perto](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/30c0f39d77b2eb054e67d0babc7953e96cc0ee8b.png)

---

<div class="post-metadata">

**Author:** ![gabriel\_fernando](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gabriel_fernando/32/10719_2.png) [@gabriel\_fernando](https://discourse.threejs.org/u/gabriel_fernando)\
**Post date:** [May 11, 2020, 11:05pm UTC](https://discourse.threejs.org/t/glb-character-loaded-but-only-from-a-distance-and-is-distorted/14884/4 "2020-05-11T23:05:09Z")

</div>

the project is this way

[image]
