When working with files downloaded from three.js such as cube.obj and cube.mtl, rotating them appears to work without any issues. However, when attempting to rotate files created in Adobe Dimension like capsule.obj and capsule.mtl, an error pops up as seen in the snapshot below. What could be causing this issue where the self-made files cannot be rotated properly?
cube.obj cube.mtl capsule.obj capsule.mtl
app.js
import * as THREE from 'three';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js'
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import styleCSS from '../styles/style.css';
import image from '../images/shutterstock_2184208287.jpg';
import capsuleObj from '../object/capsule.obj';
import capsuleMtl from '../object/capsule.mtl';
const RAD = .005;
let camera, scene, renderer, object;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20);
camera.position.z = 2.5;
// scene
scene = new THREE.Scene();
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 15);
camera.add(pointLight);
scene.add(camera);
// model
const onProgress = function (xhr) {
if (xhr.lengthComputable) {
const percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
new MTLLoader()
.setPath('.')
.load(capsuleMtl, function (materials) {
materials.preload();
new OBJLoader()
.setMaterials(materials)
.setPath('.')
.load(capsuleObj, function (obj) {
object = obj;
object.position.y = - 0.95;
object.scale.setScalar(.05);
scene.add(object);
}, onProgress);
});
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.useLegacyLights = false;
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 2;
controls.maxDistance = 5;
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
const axis = new THREE.Vector3(.5, .5, 0);
object.rotateOnAxis(axis, RAD);
renderer.render(scene, camera);
}