Hey there, I have a GLTF model that I successfully loaded into my ThreeJS scene by using the code snippet below:
gltfLoader.load('assets/models/coin/scene.gltf', (gltf) => {
const root = gltf.scene;
gltf.scene.traverse(function(node){
if ( node.isMesh ) {
node.castShadow = true;
node.receiveShadow = true;
if(node.material.map) {
node.material.map.anisotropy = 16;
}
}
})
// root.position.set(25, 120, -500);
root.position.set(0, 0, 0);
root.scale.set(20, 20, 20);
coinBox = new THREE.BoxHelper( root, 0xffff00 );
scene.add(coinBox);
coin = root;
scene.add(root);
//Adding a circle to visualize the pivot point
const circleGeometry = new THREE.CircleGeometry(3, 64);
const circleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
circleMesh.position.copy(root.position);
circleMesh.position.y += 1;
scene.add(circleMesh);
});
I decided to add a CircleGeometry to get a clear picture of where the Pivot point lies in this object. Interestingly, it appears that the pivot point is not positioned at the center of the model.
Hence, when I try to execute this line of code:
coin.rotation.z += 0.01;, it unintentionally rotates around the incorrect pivot point (shown as the red dot in the GIF).
https://i.sstatic.net/9GxAF.gif
I am wondering if there's any method I can use to manually adjust the pivot point or reposition the center based on the meshes that have been loaded?