I can't load a model into Three.js

Questions
3

Try it like so

LoadGLTFmove

from
Collection of examples from discourse.threejs.org

(see link at the top)

code slightly modified :exclamation:

<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/how-to-rotate-a-gltf-model-in-a-specific-direction/2881/18 -->
<head>
	<title> LoadGLTFmove </title>
	<meta charset="utf-8" />
	<style>
	body {
	overflow: hidden;
	margin: 0;
	}
	</style>
</head>
<body> </body>

<script src="../js/three.min.115.js"></script>
<script src="../js/OrbitControls.115.js"></script>
<script src="../js/GLTFLoader.115.js"></script>

<script>

'use strict'

// @author hofk
 
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.001, 100000 );
camera.position.set( -100, 400, 1000 );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.setClearColor( 0xaaaaaa, 1 );

const controls = new THREE.OrbitControls( camera, renderer.domElement );

const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const lightA = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( lightA );

const lightP = new THREE.PointLight( 0xddff00, 1  );
lightP.position.set( -1, 3, 500 );
scene.add( lightP );

// --- data input ---
let yRotation =  0; 
let xPosition = -1.2;	 
let zPosition =  3.5;
// -----         ----- 

const loader = new THREE.GLTFLoader( );

// konta johanna remix (CC-BY)   people (license)
// https://poly.google.com/view/7PNIMdmMSPD

//loader.load( 'girl/google poly.gltf', process );
loader.load( 'https://holesa.github.io/polymodel.github.io/mountains.glb', process );
let model = new THREE.Object3D( );
let c, size; // model center and size
 
let t = 0;
let x0 = xPosition;
let dx;

model.scale.set(0.1,0.1,0.1);

animate();

function animate( ) {
	
	requestAnimationFrame( animate );
	
	yRotation += 0.005;	
	t += 0.001;
	dx = Math.sin( t )	
	xPosition = x0 + dx;	
 	
	model.rotation.y = yRotation;
	
	model.position.x = xPosition;
	model.position.z = zPosition;
		
	renderer.render( scene, camera );
	
}

function process( gltf ) {	
		
	const box = new THREE.Box3( ).setFromObject( gltf.scene );		 
	const boxHelper = new THREE.Box3Helper( box, 0xffff00 );
    scene.add( boxHelper );
	
	c = box.getCenter( new THREE.Vector3( ) );
	size = box.getSize( new THREE.Vector3( ) );
	
	gltf.scene.position.set( -c.x, size.y / 2 - c.y, -c.z );

	model.add( gltf.scene );
	
	scene.add( model );
	
} 
	
</script>

</html>
1 Like