As I delve into learning three.js, I've encountered an issue with a basic script intended to load an external 3D model. Despite not receiving any console errors and confirming that the model is fully loaded, it remains invisible in the browser. I'm seeking assistance in identifying what might be causing this problem and how to resolve it. It's puzzling why it's currently not functioning as expected.
<html lang="en">
<head>
<title>External Asset</title>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="canvas.css">
</head>
<body>
<script src="../three.js-master/build/three.min.js"></script>
<script src="../three.js-master/examples/js/loaders/GLTFLoader.js"></script>
<!-- <script src="../three.js-master/examples/js/controls/OrbitControls.js"></script> -->
<script>
var camera, scene, renderer;
//var controls;
var loader;
init();
function init() {
//Renderer
renderer = new THREE.WebGLRenderer( {antialias: true} );
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize( width, height );
renderer.setClearColor ( new THREE.Color( "rgb( 198,215,244 )" ), .5 );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
//Light Source
var light = new THREE.PointLight( new THREE.Color( "rgb( 232,227,92 )" ), 3, 100 );
light.position.set( 5,5,0 );
scene.add( light );
//Create Camera
camera = new THREE.PerspectiveCamera (45, width/height, 1, 1000);
camera.position.set( 5,5,5 );
camera.lookAt( 0, 0, 0 );
//Load asset
loader = new THREE.GLTFLoader();
loader.load( '../models/gltf/scifi-girl/scene.gltf',
function( gltf ) {
scene.add( gltf.scene );
},
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
console.log( 'An Error Occurred' );
}
);
renderer.render( scene, camera );
}
</script>
</body>