Simple full code example

Hi guys

I’ve gone through the “Creating a Scene” doc and the “Loading 3D models” doc

That’s way too complicated. I just want a simple full example of the simplest html page that loads a gltf model. Anybody have one of those handy or can point me a site where I can grab the code by simply looking at the source code please?

This example is almost perfect:
https://threejs.org/examples/#webgl_loader_gltf
however it has the menu etc on the left that makes it too complex to look at the code. I just want the code for the window on the right

Then use this link: https://threejs.org/examples/webgl_loader_gltf

Thanks, that works better

A very, very simple example. :slightly_smiling_face:

see
https://hofk.de/main/discourse.threejs/2020/LoadGLTF/LoadGLTF.html
with downloaded model

Updated, see further below.

// konta johanna remix (CC-BY)   people (license)
// https://poly.google.com/view/7PNIMdmMSPD
loader.load( 'girl/google poly.gltf', process );

Model is not centered!

function process( gltf ) {

	const model = gltf.scene;
	
	console.log( model ); // console 

	scene.add( model );		 

	//model.position.set( 5, -0.3, -4 );
	//model.rotation.set( 0, 0.7, 0 );
	
}

Non-centered models can cause problems.

This leads me to the following articles.

I will try it, because I need the girl centered for my showroom.
Circular control used for walkable areas control

I’ve tried it, it’s not that difficult.
But it took me a while because I tried much more complicated things, as I often do. :slightly_frowning_face:

I’ve updated the example.

The girl jumped from the higher box, turned around and went to her starting position.

The input data is fixed in code.

// --- data input ---
const yRotation = 3.21; 
const xPosition = -1.5;	 
const zPosition = 3.1;

function process( gltf ) {	
		
	const box = new THREE.Box3( ).setFromObject( gltf.scene );		 
	const boxHelper = new THREE.Box3Helper( box, 0xffff00 );
        scene.add( boxHelper );
	
	const c = box.getCenter( new THREE.Vector3( ) );
	const size = box.getSize( new THREE.Vector3( ) );
	
	gltf.scene.rotation.set( 0, yRotation, 0 );
	
	// rotate center
	const cz = c.z * Math.cos( yRotation ) - c.x * Math.sin( yRotation );
	const cx = c.z * Math.sin( yRotation ) + c.x * Math.cos( yRotation );
	
	gltf.scene.position.set( xPosition - cx, size.y / 2 - c.y, zPosition - cz );
	
	scene.add( gltf.scene ); 

}

:slightly_smiling_face:There How to rotate a gltf model in a specific direction is the last UPDATE.