Three.js - Displaying images on a JSON object

Question

I am using version 71 of the library. I am trying to display an image on each face of a 3D object (made through Blender). Whether it is through different images or one image being repeated isn't important. The object is loaded through a load function after being instantiated as a JSONLoader. The following is an example of loading the json file. In this case, the shape is a cube, which has six sides. Is there a way to modify the following code to make this happen?

    var loaderSix = new THREE.JSONLoader();
    loaderSix.load("./resources/json/six.json", function (model) {
        var materialSix = new THREE.MeshNormalMaterial();

        six = new THREE.Mesh(model, materialSix);
        six.translateY(1);
        six.scale = new THREE.Vector3(3, 3, 3);
        meshSix = THREE.SceneUtils.createMultiMaterialObject(six, materialSix);
    });

Btw, could you make your question more clear? Do you load object or materials? It is not clear where your images are from? Perhaps, you already have the cube, and you are loading materials coz it is not difficult to make a cube with "three.js"? — Darius Miliauskas, Jul 27 '15 at 15:44
I am loading the json file, but the code doesn't show my trying to display the images on the object. I have tried several guesses to try to make images display, but it wouldn't work. Had I showed you my original code it would've looked unclear and convoluted I'm afraid. My images come from a folder within the resources/images folder, the same resources folder that contains the "json" folder. I think I am loading it as materials and not objects for my images; what is the difference between loading objects or materials? Is there a preferred way when loading images? — ACoder, Jul 27 '15 at 15:54

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

1) If you are loading materials, and already have the geometry, then have you tried "MeshFaceMaterial" (docs)?

var loaderSix = new THREE.JSONLoader();
    loaderSix.load("./resources/json/six.json", function (model) {
        var materialSix = new THREE.MeshFaceMaterial("your materials array: model");

        six = new THREE.Mesh("your cube geometry", materialSix);
        six.translateY(1);
        six.scale = new THREE.Vector3(3, 3, 3);
    });

2) If you are loading the object, then to add different images is "MeshFaceMaterial" is an option as well, the similar example here. I modified that code to fit the situation:

    var image;        
    var materials = [];
    for (var i=0; i<6; i++) {
     image = "./resources/images/"+fileName+".png"
     materials.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture(image)}));
    }
    var loaderSix = new THREE.JSONLoader();
        loaderSix.load("./resources/json/six.json", function (model) {
            var materialSix = new THREE.MeshFaceMaterial(materials);

            six = new THREE.Mesh(model, materialSix);
            six.translateY(1);
            six.scale = new THREE.Vector3(3, 3, 3);
        });

edited May 23 '17 at 12:29

Community

1
1

answered Jul 27 '15 at 15:33

Darius Miliauskas

3,391
4
35
53

I have tried that method, but I coded it wrong in the past. I am creating my material array now to try it out. How would you declare and define the array? I know how to make arrays, but I'm asking in terms of loading the image through the three.js library. – ACoder Jul 27 '15 at 15:59
Check my answer with the second option! And check if your images are .png? – Darius Miliauskas Jul 27 '15 at 16:01
They are PNG files for sure. – ACoder Jul 27 '15 at 16:04
What do you mean by if I already have the geometry? Do you mean the 3D shape? The six.json is the defining the shape - it being a series of data defining the coordinates. – ACoder Jul 27 '15 at 16:08
Check the second option in my answer now, I edited with some corrections. Btw, your .png names should fit my for-loop. Asking you about the geometry, I meant that perhaps you created that geometry-shape with the code, not loading. – Darius Miliauskas Jul 27 '15 at 16:11
Have you checked? What errors you got if it does not work? – Darius Miliauskas Jul 27 '15 at 16:19
I've tried and not running into errors; but the 3-D shape isn't appearing; I'm still looking at why it isn't. – ACoder Jul 27 '15 at 17:32
Does it appear without images? Try to check if it appear without images. To do it change "var materialSix = new THREE.MeshFaceMaterial(materials);" to "var materialSix = new THREE.MeshBasicMaterial();" Perhaps it could be problems with lights or even your json itself, not loading images. – Darius Miliauskas Jul 27 '15 at 17:35
Moreover, perhaps it can be there, just not in the view, then you need to play with the coordinates if it somewhere above your camera view. – Darius Miliauskas Jul 27 '15 at 17:37
The error "THREE.Object3D.add: object not an instance of THREE.Object3D. undefined" appears when I add the six variable to the scene in this case: scene.add(four); – ACoder Jul 27 '15 at 17:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84397/discussion-between-acoder-and-darius-miliauskas). – ACoder Jul 27 '15 at 17:55
The shape itself doesn't appear, I've tried your suggestions with using MeshBasicMaterial instead, and that doesn't work either; I doubt it's the camera or spotlights, it's a copy of code that is being used in another html file that works (only this html file doesn't do images, just the default coloring of the sides). Would you be willing to do this in chat where I can paste the code? – ACoder Jul 27 '15 at 18:02
So, perhaps, you have the problem with the loading json file. It means you cannot load the object, if I am right? If yes, start another question which would be I cannot load json, and give there loading code, and json code (if this file is not too long), and put here the reference that I can check it. This question is about putting the images on the object, and perhaps it would be useful for others. – Darius Miliauskas Jul 27 '15 at 18:05
The problem is that u need to add it to scene ("scene.add(tetrahedron);") during the load (loader.load). – Darius Miliauskas Jul 29 '15 at 18:05
1

I've loaded the shape, thank you Darius. I am still struggling to actually show the different images though. I have my code posted up in a different post, since it required help in a different aspect - there was an error involved which has been resolved, but still doesn't display the images. The post is here: http://stackoverflow.com/questions/31684967/error-involved-in-displaying-images-on-a-shape-using-three-js – ACoder Jul 31 '15 at 19:05
Check out, I gave u the answer. – Darius Miliauskas Aug 04 '15 at 10:57

Three.js - Displaying images on a JSON object

1 Answers1