Using Three.js to Showcase Images within a JSON Data Structure

Question

Using Three.js to Showcase Images within a JSON Data Structure

I am currently utilizing version 71 of the library to showcase an image on each side of a 3D object created in Blender. It doesn't matter if different images are used or if one image is repeated. The object is loaded using a load function post its instantiation as a JSONLoader. Below is an instance of loading the json file. In this scenario, the object is a cube comprising six sides. Is there a method to adjust the code below to achieve this?

    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);
    });

javascript json three.js blender

Answer 1

Answer №1

1) Have you considered using "MeshFaceMaterial" (docs) if you already have the geometry when loading materials?

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) When loading the object and wanting to add different images, "MeshFaceMaterial" can also be an option. A similar example can be found here. I adapted the code to suit 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);
        });

Answer 2

1) Have you considered using "MeshFaceMaterial" (docs) if you already have the geometry when loading materials?

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) When loading the object and wanting to add different images, "MeshFaceMaterial" can also be an option. A similar example can be found here. I adapted the code to suit 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);
        });

Using Three.js to Showcase Images within a JSON Data Structure

Answer №1

Similar questions

The variable was not able to be assigned any data

Numerous operations included in a JavaScript document

An error is thrown when using AngularJS .length property

Express server unable to process Fetch POST request body

Code error: JSON unexpected token "&" encountered

Element sticking on scroll down and sticking on scroll up movements

Vuex data fails to update upon browser reload in Nuxt SSR

Ways to extract single JSON entities from a consolidated JSON structure

Clicking on the ng-repeat will trigger the ng-click event, which populates all the data using ng

What is the best way to have a text field automatically insert a hyphen after specific numbers?

What is the proper way to reference a property's value within another property of the same JavaScript Object?

Issue with retrieving query results using node_redis client

Steps to resolve org.json.JSONException: Index 2 out of bounds [0..2) error

At what point is the ajax call considered fully executed?

Error in connecting on IOS due to JSON failure

Is there a way to print the full page including scroll tab content?

Creating a unique Angular 2 Custom Pipe tutorial

Refreshing and enhancing Android contacts through the Expo project

When the user presses the enter key to submit data, the Ajax page reloads

How to utilize Vue method for accessing DOM elements