I am learning how to render glb (and gltf) files using three.js, and I got black screen as result. Any advice for this? Thanks!
PS: I am using three.min.js and GLTFLoader.js from here: three.min.js -> https://github.com/mrdoob/three.js/blob/r142/build/three.min.js GLTFLoader.js -> https://github.com/mrdoob/three.js/blob/r142/examples/js/loaders/GLTFLoader.js
PS2: Avocado glb file is here: https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Avocado
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.x = 1;
scene.add( camera );
const canva = document.getElementById("canvas");
const renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const loader = new THREE.GLTFLoader();
loader.load('Avocado.glb', function (gltf) {
image = gltf.scene;
image.scale.set(2, 2, 2);
image.position.y = 4;
scene.add(image);
}, undefined, function ( error ) {
console.error( error );
} );
camera.position.set(0, 0, 50);
renderer.render(scene, camera);
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();body {
margin: 0;
}
canvas {
width : 100%;
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avocado-renderer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas #canvas id="canvas"></canvas>
<script src = "three.min.js"></script>
<script src="GLTFLoader.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>