I have a vision to create a cutting-edge model browser that allows users to handpick models and textures themselves. In order to achieve this, I am utilizing the File API for smooth file handling. My approach involves using two separate file inputs for receiving both the model and texture files.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" accept=".obj" />
<input type="file" name="texture" id="texture" accept=".jpg" />
</form>
Furthermore, I have incorporated two key events:
document.getElementById('file').addEventListener('change', readFile, false);
document.getElementById('texture').addEventListener('change', readTexture, false);
The following functions are crucial in achieving this innovative browser:
function readFile(evt) {
if(window.object) {
scene.remove(object);
delete object;
}
var fileObject = evt.target.files[0];
var reader = new FileReader();
reader.readAsText(fileObject);
reader.onload = function() {
loader = new THREE.OBJLoader();
object = loader.parse(reader.rresult);
scene.add(object);
};
}//Method to add model to the scene
function readTexture(evt) {
if(window.mat){
scene.remove(mat);
delete mat;
}
var fileObject = evt.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(fileObject);
var textureLoader = new THREE.TextureLoader();
mat = new THREE.MeshLambertMaterial();
mat.map=reader.result;//Though it doesn’t work correctly.
reader.onload = function() {
object.children[0].material = mat;
};
}//Method to apply texture to model
I've encountered an issue with 'mat.map=reader.resul' not functioning as intended. Seeking guidance from anyone who can assist me!