The Original Problem
- I’m looking to continuously rotate my .GLBs along their axes. (Reference: i.imgur.com/SYa8dTp.png)
The Solution
- I got the “Coin” & “Bond” to rotate along their axes. (Reference: imgur.com/hSg71gm)
- hofk’s ShaderExamples_09 … He has a section in the code that worked for me.
- 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) }
