[SOLVED] Rotate .GLB Model (GLTFLoader) ← thanks hofk

Questions
1

The Original Problem

  1. I’m looking to continuously rotate my .GLBs along their axes. (Reference: i.imgur.com/SYa8dTp.png)

The Solution

  1. I got the “Coin” & “Bond” to rotate along their axes. (Reference: imgur.com/hSg71gm)
  2. hofk’s ShaderExamples_09 … He has a section in the code that worked for me.
  3. const modelSqu = new THREE.Object3D( ); was a new approach!

.
.
I’m loving ThreeJS & this community!
.
.

======================================================================

CODE

// IMPORTS
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { GUI } from 'dat.gui'
import Stats from 'three/examples/jsm/libs/stats.module'

// SCENE & CAMERA
const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))
const camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 1000 )
camera.position.set(0, 1.3, 1.7)

// LIGHT
var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 300, 0 );
scene.add( light );

// RENDERER
const renderer = new THREE.WebGLRenderer()
renderer.physicallyCorrectLights = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// USER INTERACTION
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.target.set(0, 1, 0)

// DATGUI
const gui = new GUI()
const cameraFolder = gui.addFolder('Camera')
cameraFolder.add(camera.position, 'x', 0, 10)
cameraFolder.add(camera.position, 'y', 0, 10)
cameraFolder.add(camera.position, 'z', 0, 10)
cameraFolder.open()
light.intensity = 2.4;
const lightFolder = gui.addFolder('THREE.Light')
const data = { color: light.color.getHex(), mapsEnabled: true }
lightFolder.addColor(data, 'color').onChange(() => {
    light.color.setHex(Number(data.color.toString().replace('#', '0x')))})
lightFolder.add(light, 'intensity', 0, 4, 0.1)
lightFolder.open()
const stats = Stats()
document.body.appendChild(stats.dom)

// RESIZEABLE
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

// ------------- GLTF MODELS -------------- //

// ZUK .GLB
const ZUK_loader = new GLTFLoader();
ZUK_loader.load( 'models/zuk_1035.glb', (gltf) => { scene.add(gltf.scene) })


// COIN .GLB
const COIN_Rotate = new THREE.Object3D( );
const COIN_loader = new GLTFLoader();
COIN_loader.load(
	'models/coin.glb',
    ( gltf ) => {
        const box = new THREE.Box3( ).setFromObject( gltf.scene );
        const c = box.getCenter( new THREE.Vector3( ) );
        const size = box.getSize( new THREE.Vector3( ) ); 
        gltf.scene.position.set( -c.x, size.y / 2 - c.y, -c.z );
        COIN_Rotate.add( gltf.scene );
        COIN_Rotate.scale.set( 1.1, 1.1, 1.1 );
        
        COIN_Rotate.position.x = 0.55;  // Coin X-coord
        COIN_Rotate.position.y = 0.58;  // Coin Y-coord
        COIN_Rotate.position.z = 0.4;   // Coin Z-coord
        
        scene.add( COIN_Rotate );
	});

// BOND .GLB
const BOND_Rotate = new THREE.Object3D( );
const BOND_loader = new GLTFLoader( );
BOND_loader.load( 
    'models/bond.glb', 
    ( gltf ) => {
        const box = new THREE.Box3( ).setFromObject( gltf.scene );
        const c = box.getCenter( new THREE.Vector3( ) );
        const size = box.getSize( new THREE.Vector3( ) ); 
        gltf.scene.position.set( -c.x, size.y / 2 - c.y, -c.z );
        BOND_Rotate.add( gltf.scene );
        BOND_Rotate.scale.set( 1, 1, 1 );
        
        BOND_Rotate.position.x = -0.55; // Bond X-coord
        BOND_Rotate.position.y = 0.6;   // Bond Y-coord
        BOND_Rotate.position.z = 0.4;   // Bond Z-coord
        
        scene.add( BOND_Rotate );
	});

// ANIMATE
function animate() {
    requestAnimationFrame(animate)
    controls.update()
    render()
    stats.update()

    BOND_Rotate.rotation.y += 0.01;     // Rotate Bond around its Y-axis
    COIN_Rotate.rotation.y += 0.01;     // Rotate Coin around its Y-axis
}

function render() { renderer.render(scene, camera) }
animate()


// --------------- UNUSED ------------------- //

// MODEL ATTRIBUTES - GOES INSIDE .LOAD()
    // gltf.scene.traverse(function (child) {
    //     if ((child as THREE.Mesh).isMesh) {
    //         const m = (child as THREE.Mesh)
    //         m.receiveShadow = true
    //         m.castShadow = true
    //     }
    //     if (((child as THREE.Light)).isLight) {
    //         const l = (child as THREE.Light)
    //         l.castShadow = true
    //         l.shadow.bias = -.003
    //         l.shadow.mapSize.width = 2048
    //         l.shadow.mapSize.height = 2048
    //     }}) 

// CONSOLE & ERROR - GOES INSIDE .LOAD()
    // (xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded') },
    // (error) => { console.log(error) }
2

Try these two examples from the collection

LoadGLTFmove
ShaderExamples_09

:slightly_smiling_face:

3

Thank you, sir!

Just had some follow-up questions, if you’d be so kind.
Learning ThreeJS via the Udemy course, but I must have missed some of the information

4

No problem. For new questions, please always open a new topic.

5

Oh, sorry.

Didn’t know the etiquette. New to ThreeJS
I’ll open a new one and streamline the post for searching :slight_smile: