Simple full code example

[methree]

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

[Mugen87]

@methree

however it has the menu etc on the left that makes it too complex to look at the code.

Then use this link: three.js webgl - GLTFloader

[methree]

Thanks, that works better

[hofk]

A very, very simple example.

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 );
	
}

[hofk]

Non-centered models can cause problems.

This leads me to the following articles.

How to center vertices of a gltf model

Centering a glTF geometry

I’m trying to use the geometry.center() method to center my gltf model but can’t seem to get it right. Here’s the link to my fiddle The .center() method works when using my .js model but not the .glb version of my car model. On line 272 I’m using var loader = new THREE.GLTFLoader(); loader.load(“https://raw.githubusercontent.com/baronwatts/models/master/lego-lamb-racer.glb”, function(gltf) { gltf.scene.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.…

Centering and Resizing GLTF models automatically in Three.js

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

[hofk]

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.

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 ); 

}

---

There How to rotate a gltf model in a specific direction - #18 by Heyam is the last UPDATE.