Ufdjrw

I am new to ThreeJS, what I am trying to accomplish is to load a gltf model, which is correctly shown in three-gltf-viewer, it is valid.

When I load it into threeJS, the model loads up ok but the camera is placed on the horizon line of the model, and the orbit control does not work when I try to zoom in and out or any other rotation of the scene is disabled.

I tried to tweak any possible values of camera and scene but I just can't "jump on top" of the model and see it from above. Here is the code.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 800, window.innerWidth / window.innerHeight, 500, 1500000 );
camera.position.set(1, 1, 1);

var renderer = new THREE.WebGLRenderer( alpha: false );
renderer.setClearColor( 0xC5C5C3 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls( camera, renderer.domElement ); 
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight ); 

// Instantiate a loader
var loader = new THREE.GLTFLoader();
loader.load('GLTF_local_coord_sys/GEOTIFF_local_coord_sys.gltf', 
 function(gltf) 
 var object = gltf.scene;
 gltf.scene.scale.set( 0.65, 0.65, 0.65 ); 
 gltf.scene.position.x = 1; 
 gltf.scene.position.y = 1; 
 gltf.scene.position.z = 1; 

 scene.add( gltf.scene );
 camera.lookAt(scene.position);
 ,
 function ( xhr ) 
 console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
 ,
 function ( error ) 
 console.log( 'An error happened' );
 
);
camera.position.z =25;
function animate() 
 render();
 requestAnimationFrame( animate );


function render() 
 renderer.render( scene, camera );

render();
animate();

Does anyone know how to fix this?