I have made a cube in Blender, and have exported it using the export > glTF 2.0 to make a cube.glb file.
I am able to verify that the cube.glb is downloaded, and is in memory.
console.log shows:
THREE.WebGLRenderer 97
(index):85 model: load cube
(index):91 100% loaded
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./three.js"></script>
<script src='OrbitControls.js'></script>
<script src='GLTFLoader.js'></script>
<script src="./TrackballControls.js"></script>
<title>GLFT Loader</title>
</head>
<body>
<main>
<section>
<article>
<header>
<h1>GLFT Loader</h1>
</header>
</article>
<div id="cube-container"></div>
<nav id="cube-model-nav">
<ul>
<li><a id="load-cube-button" href='/load-cube'>load cube</a></li>
</ul>
</nav>
</section>
</main>
<script>
const material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF } );
const canvasEl = document.getElementById('cube-container');
const containerWidth = canvasEl.offsetWidth;
const containerHeight = canvasEl.offsetHeight;
// create renderer
const renderer = new THREE.WebGLRenderer(
{
antialias: true,
alpha: true,
autoClear: true,
physicallyCorrectLights: true
}
);
renderer.setPixelRatio(2);
renderer.gammaOutput = true;
renderer.gamaFactor = 2.2;
renderer.setSize( containerWidth, containerHeight );
canvasEl.appendChild( renderer.domElement );
// create scene
const scene = new THREE.Scene();
// create camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// controls
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minZoom = 1;
controls.maxZoom = 1.5;
controls.enablePan = false;
// ambient light
const ambientLight = new THREE.AmbientLight( 0x404040, 0.001 );
const hemisphericLight = new THREE.HemisphereLight({
skyColor: 0xffffbb,
groundColor: 0x080820,
intensity: 0.25,
position: {
x: 0,
y: 430,
z: -2500
}
});
const glTFLoadBow = (model) => {
console.log('model: ', model);
const glTFLoader = new THREE.GLTFLoader();
glTFLoader.load('https://path-to/cube.glb', (glTF) => {
console.log('glTF: ', glTF);
scene.add(glTF.scene);
},
(xhr) => {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
(error) => {
console.log('an error occurred: ', error);
});
};
// draw Scene
const renderThree = () => {
camera.updateMatrixWorld();
renderer.render( scene, camera );
};
// run loop (update, render, repeat)
const animate = () => {
requestAnimationFrame( animate );
renderThree();
};
animate();
const glTFLoadModel = (event) => {
event.preventDefault();
const model = event.target.text.toLowerCase();
glTFLoadBow(model);
}
const loadCubeElement = document.querySelector('#load-cube-button');
loadCubeElement.addEventListener('click', glTFLoadModel, false);
</script>
</body>
</html>
cube.glb object:
cube.glb (2.0 KB)
I have uploaded the cube.glb to https://gltf-viewer.donmccurdy.com/ and it renders perfectly in there.
I am not able to see/render it on my computer and do not know why.