Hello THREEJS Community…
I am new to THEREJS but i have some JavaScript experience, i am currently having a issue with loading-manager. as you see if you scroll down to where i instanced a new one, it keeps firing onError i read the documentation and i did what it said and my files are sorted properly, so why does a error happen???.
This is what my project folder looks like:
-- PROJECT
-- lib/
-- hashes/
-- **assets(wip).json**
-- js/
-- **main.js**
-- **console.js**
--sounds/
-- (sounds are listed in code)
-- sfx/
-- tracks/
**index.html**
Main.JS
const TerrariaAssets = {
menu_music: {
url: "lib/music/menu.ogg",
type: "audio"
},
player_hit_0: {
url: "lib/sounds/sfx/plr/Player_Hit_0.wav",
type: "audio",
},
player_hit_1: {
url: "lib/sounds/sfx/plr/Player_Hit_1.wav",
type: "audio",
},
player_hit_0: {
url: "lib/sounds/sfx/plr/Player_Hit_2.wav",
type: "audio",
},
player_killed: {
url: "lib/sounds/sfx/plr/Player_Killed.wav",
type: "audio",
}
};
class Terraria3DHTML {
constructor() {
this._ListenToKeys().then(() => {
this._Initiate();
}, () => {
this._ErrQuit();
});
}
_ErrQuit() {
alert("Huge Error! Sorry We Have to Quit...");
window.close()
}
_ListenToKeys() {
return new Promise((resolve, reject) => {
try {
this._keys = {};
function keyup(e) {
this._keys[e.which] = !0;
}
function keydown() {
this._keys[e.which] = !1;
}
window.addEventListener("keyup", keyup);
window.addEventListener("keydown", keydown);
resolve();
} catch (err) {
console.log(err);
reject()
}
})
}
_LoadAssets() {
return new Promise((resolve, reject) => {
try {
this._loadedAssets = {};
var loadingManager = new THREE.LoadingManager();
var audioLoader = new THREE.AudioLoader(loadingManager);
var imageLoader = new THREE.ImageLoader(loadingManager);
loadingManager.onStart = function(url) {
console.warn("loading all assets...");
}
loadingManager.onProgress = function(url) {
console.debug("loading asset... {url: " + url + "}");
}
loadingManager.onError = function() {
// reject();
// alert(e)
}
loadingManager.onLoad = function() {
console.info("finished loading all assets...")
resolve();
}
for (var asset in TerrariaAssets) {
if (TerrariaAssets[asset].type == "image") {
imageLoader.load(TerrariaAssets[asset].url);
} else if (TerrariaAssets[asset].type == "audio") {
audioLoader.load(TerrariaAssets[asset].url);
}
}
} catch (err) {
reject(err)
}
})
}
_Initiate() {
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x3e6afa)
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this.renderer = new THREE.WebGLRenderer({
antialias: false
});
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);
window.addEventListener("resize", function() {
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
}.bind(this))
this._LoadAssets().then(() => {
this._RAF();
}, () => {
this._ErrQuit();
});
}
_RAF() {
const cube = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial());
this.scene.add(cube);
this.camera.position.z = 5;
function animate() {
requestAnimationFrame(animate.bind(this));
this.renderer.render(this.scene, this.camera);
};
animate.bind(this)();
}
}
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("mousedown", function() {
try {
new Terraria3DHTML();
} catch (error) {
console.error(error.toString())
}
}, {
once: true
})
});
Console.JS (Self Explanatory) (Captures console.log())
ConsoleJS.init({
selector: '.console'
})
Any help is appreicated