I am struggling to get my imported obj model to move using three.js. There seems to be a formatting issue where the obj object needs to be declared inside a function, making it inaccessible outside of that function even if I pre-declare a variable to point to the object. How can I access the object in this scenario?
import * as THREE from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7938f958282a7d7c9d6d5d1c9d6">[email protected]</a>/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f18599839494b1c1dfc0c3c7dfc0">[email protected]</a>/examples/jsm/controls/OrbitControls.js';
// More import statements
const renderer = new THREE.WebGLRenderer();
// Additional code for setting up renderer and scene
let house = undefined;
// MTL and OBJ loader setup
const mtlLoader = new MTLLoader();
mtlLoader.load(
'../source/MaryStanfordLifeboatHouse02.mtl',
(materials) => {
materials.preload();
const objLoader = new OBJLoader()
objLoader.setMaterials(materials)
objLoader.load(
'../source/MaryStanfordLifeboatHouse02.obj',
function(object){
scene.add(object);
house = object;
house.rotation.x = 1/2 * Math.PI;
house.rotation.y = Math.PI;
},
function(xhr){
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
function(error){
console.log("Object error")
}
)
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
(error) => {
console.log("Material Error")
}
)
// Texture loader setup
const textureLoader = new THREE.TextureLoader();
textureLoader.load(
'../img/doge.jpg',
function ( texture ) {
scene.background = texture;
},
undefined,
function ( err ) {
console.error( 'An error occurred.' );
}
);
// Animation and rendering functions
function animate(){
renderer.render(scene,camera);
sLightHelper.update();
}
renderer.setAnimationLoop(animate);
window.addEventListener('resize',function(){
camera.aspect = window.innerWidth/this.window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
});