After spending the entire day experimenting with different solutions, I am still unable to solve my problem. Despite trying various examples from previous years, my objects are not appearing as expected.
I have experimented with three different formats: .json, .js, and now .mtl with .obj. The current code I am working with is shown below:
function addModels() {
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("../models/lampa.mtl", function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("../models/lampa.obj", function (mesh) {
mesh.scale.set(1,1,1);
mesh.position.set(0,0,0);
scene.add(mesh);
})
})
Additionally, here is the HTML file containing the script that runs on canvas:
var camera;
var scene;
var renderer = new THREE.WebGLRenderer();
var controls;
//Simple functions to initialise scene and render it.
initialise();
render();
//animate();
//add models
addModels();
function initialise() {
// Create a scene
scene = new THREE.Scene();
// Add the camera
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 100, 250);
// Add scene elements
addWalls();
addKerbs();
// Add lights
addLights();
// Create the WebGL Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
//add Grass
createGrass();
addGrass();
// Append the renderer to the body
document.body.appendChild( renderer.domElement );
// Add a resize event listener
window.addEventListener( 'resize', Resize, false );
// Add the orbit controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(0, 100, 0);
}
//rendering function
function render() {
renderer.render( scene, camera );
requestAnimationFrame( render );
controls.update();
}
//Window resize.
function Resize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame(animate);
render();
status.update();
renderer.render(scene,camera);
}
Placing addModels() within the initialize function results in an error like this: https://i.sstatic.net/C1xnJ.png
I would greatly appreciate any insights or assistance. Thank you.