0
Answered

Multiple images uploading

Peter Hofacker 1 year ago updated by Vitaly Ovchinnikov 10 months ago 13

Hi Vitaly,

i need some Help with Koru.

I want change more then one Textures by User Upload.

One Image works with your demo code but how can I integrate more image Uploads?

Thanks for your help

Peter

Answer

Answer
Answered

Hello Peter,

It depends on what exactly you need, but basically it splits in two steps:

1. to load multiple images

2. to assign them to multiple sides

I can't help with the first one, but I bet you'll find a lot of sample code for multiple files loading. Once this is done, you can assign them to different materials/objects exactly the same way as you can do for a single material. There will be a little bit more javascript to do so, but overall it is the same.

Let me know if you have more specific questions.

Answer
Answered

Hello Peter,

It depends on what exactly you need, but basically it splits in two steps:

1. to load multiple images

2. to assign them to multiple sides

I can't help with the first one, but I bet you'll find a lot of sample code for multiple files loading. Once this is done, you can assign them to different materials/objects exactly the same way as you can do for a single material. There will be a little bit more javascript to do so, but overall it is the same.

Let me know if you have more specific questions.

https://3d.jd-druck.de/_koru/

Hello Vitaly,

here is the link to the dummy with the 2 file uploads. The first upload works. The second upload I do not get displayed on the 3D model. Please can you help me there.

Best regards

Peter

Under review

Have a look at your browser's console output. There is a javascript error related to a missing color-picker object. I guess the code stops there and simply doesn't go to the second file-picker initialization.

Please can you help me as I can position the second image "file-picker2" on the material "Image2"?
Many thanks

Peter


function koruInit(koru) {
var div = koru.viewport;
koru.addEventListener('loadend', onLoadEnd);
}

function onLoadEnd(event) {

var koru = event.koru;

var mtlImage = koru.materials["Image"];
if (!mtlImage) return; // no Image material
if (mtlImage.layers.length == 0) return; // no layers

var layer = mtlImage.layers[0]; // the first layer of "Image" material

var filePicker = document.getElementById("file-picker1");
filePicker.onchange = function(event) {
var image = new Image();
image.onload = function() {
layer.diffuseMap = image;
}
image.src = URL.createObjectURL(event.target.files[0]);
};

}

You can add a special function that links file picker and material like this:

function linkFilepickerToMaterial(fp, koru, mtl) {
    var filePicker = document.getElementById(fp);
    if (!filePicker) return; // no such filepicker
    filePicker.onchange = function(event) {
        var image = new Image();
        image.onload = function() {
            var material = koru.materials[mtl];
            if (!material) return; // no material
            if (material.layers.length == 0) return; // no layers
            var layer = material.layers[0];
            layer.diffuseMap = image;
        };
        image.src = URL.createObjectURL(event.target.files[0]);
    };
}

Just put this right before function onLoadEnd() in your code above. Then you can re-write onLoadEnd() this way:

function onLoadEnd(event) {
    linkFilepickerToMaterial("file-picker1", event.koru, "Material 1");
    linkFilepickerToMaterial("file-picker2", event.koru, "Material 2");
}

I didn't test this in real environment, so typos are possible, but the overall idea should be clear enough.

Let me know if it helps.

Hello Vitaly,
Unfortunately, I do not get the function to work. Maybe you can look again I added the data as ZIP.
Many Thanks
Peter

Upload_Test.zip

Looks like I missed one detail, please modify the code this way:

function onLoadEnd(event) {

basically, you just need to add event keyword to the function parameters list. After that I can load both front and back images in your HTML page.

Perfect that works so many thanks! :-)

Can you tell me how I can exchange the Reflection Mask with an uploaded image, for example with "file-picker3" and "file-picker4"?

Best regards

Peter

Try specularMap instead of diffuseMap in the code below, so instead of:

 layer.diffuseMap = image;

you get:

 layer.specularMap = image;

You can then make a similar function linkFilepickerToSpecularMap() that works with specular masks. Overall, all the methods and properties are listed here: https://boxshot.com/support/koru-help/dev_api.html

Hello Vitaly,
is "specularMap" the reflection mask in specular layer?
I would like to replace the mask in my Reflection layer see screenshot.
Many thanks for your help

Peter

Will be answered

This one is not (yet) supported, we'll add it in the next update.

Hello Vitaly,

I can not get it that the specularMap (see screenshot) is changed with the code that works for the diffuseMap.


I changed the code at the location you described by

layer.diffuseMap = image; in layer.specularMap = image ;.


I tested it with the same dummy with which the diffuseMap works without adding it as an extra feature. I also incorporated an image as a mask in the exported Koru document (screenshot).


Please can you help me again?

Many Thanks

Peter

Answered

Hello Peter,

We've just released version 1.7 of Koru that got the mask parameter you need. Sorry about the time it took. Let me know if it helps.

Cheers!