Error involved in displaying images on a shape using Three.js

Question

I am trying to display images on each face of the polyhedron using three.js r71. I am making the geometry by loading a JSON file which holds the data that defines the shape. I set a plane below the polyhedron as well. I get an error and I'm wondering what this means or what I am doing wrong. Here is the error message I get in the JavaScript console:

[.WebGLRenderingContext-0888D200]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

WebGL: too many errors, no more errors will be reported to the console for this context.

Here is the JavaScript code:

var four;

var meshFour;

var scene = new THREE.Scene();

function init() {
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;

    //LOADING GEOMETRY
    var loaderFour = new THREE.JSONLoader();
    var materialsArray = [];
    materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/IPT.PNG")}));
    materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/Alerts.png")}));
    materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/action-item-tracking.png")}));
    materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/admin.png")}));
    
    for(var i = 0; i <= 3; i++) {
        materialsArray[i].map.minFilter = THREE.LinearFilter;
    }
    loaderFour.load("./resources/json/tetrahedron-try.json", function (model) {

        var materialFour = new THREE.MeshFaceMaterial(materialsArray);

        four = new THREE.Mesh(model, materialFour);//issue according to three.js
        four.translateY(1);
        four.scale = new THREE.Vector3(3, 3, 3);
        meshFour = THREE.SceneUtils.createMultiMaterialObject(four, materialFour);
        scene.add(four);
    });

    camera.position.x = 20;
    camera.position.y = 20;
    camera.position.z = 20;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 60, 10);
    spotLight.castShadow = true;
    scene.add(spotLight);
    scene.add(plane);


    document.getElementById("WebGL-output").appendChild(renderer.domElement);

    render();
    
    function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    
}

window.onload = init();

The JSON file code is here:

{
    "metadata": {
        "type": "Geometry",
        "vertices": 4,
        "uvs": 1,
        "faces": 4,
        "generator": "io_three",
        "version": 3,
        "normals": 4
    },
    "uvs": [[0.250046,0.433025,0.749954,0.433025,0.5,0.865958,0.999907,0.865957,9.3e-05,0.865957,0.5,9.3e-05]],
    "faces": [40,0,1,2,0,1,2,0,1,2,40,3,2,1,3,2,1,3,2,1,40,3,0,2,4,0,2,3,0,2,40,3,1,0,5,1,0,3,1,0],
    "normals": [-0.471389,-0.333323,0.816492,-0.471389,-0.333323,-0.816492,0.942808,-0.333323,0,0,1,0],
    "vertices": [-2.42416,0,4.19877,-2.42416,-0,-4.19877,4.84832,0,-0,-0,6.85655,-0],
    "name": "Tetrahedron.001Geometry.3"
}

maybe because you are assigning texture maps to your material but your object does not have UV coords. — gaitat
– gaitat, Commented Jul 29, 2015 at 12:34
If you google "What are UV coordinates?" you will get plenty of info. Basically they are coords that define how the texture is applied to the object. — gaitat
– gaitat, Commented Jul 29, 2015 at 14:55
From what I've read, the texture is the image I would apply to the shape which from what I read, I should be doing in the 3-D software; but in the JavaScript I am trying to dynamically display the image on each side of the shape. Eventually I want to display an image that corresponds to the choice a user selects, being a check box choice. Am I doing this in the correct way?Apply a texture through the Blender program using the UV tools they have, save it; and then use my code to display images dynamically (whether it is hard coded or depending on user's input) on top of that shape that I saved? — ACoder
– ACoder, Commented Jul 30, 2015 at 15:07
Once you have the UV coords computed you can dynamically change the texture of your faces. — gaitat
– gaitat, Commented Jul 30, 2015 at 16:11

gaitat · Accepted Answer · 2015-08-04 13:41:32Z

1

In your json file you have "uvs": 1 which is in accordance with the images I get:

so you are only applying one texture to two faces, according to the uv's. So again the issue is with your model creation method.

Here is my version of the fiddle (http://jsfiddle.net/dfnkhbjm/), which yes doesn't work because of the Access-Control-Allow-Origin problem. If you copy it local, it should work.

answered Aug 4, 2015 at 13:41

gaitat

12.7k5 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ACoder Over a year ago

I have altered my model creation method ( I replaced the json file with a newer one ) and copied your JavaScript. I get more promising results in that it isn't one image over two faces but one image per face, but the image is always the same; it being the very first one in the array.

gaitat Over a year ago

Have you updated this http://intelitrac.com/tetrahedron-third.json because I am still seeing the old version.

ACoder Over a year ago

Try clearing browser cache; I'm pretty sure I replaced it. Let me know if that doesn't do it.

gaitat Over a year ago

something is not computed correctly. Add for( var i = 0; i < model.faces.length; i++ ) { model.faces[i].materialIndex = i; } inside the loader.load code before you add the four to the scene.

ACoder Over a year ago

Thank you; that worked. What is the for loop specifically doing?

|

Darius Miliauskas · Accepted Answer · 2015-08-04 10:57:15Z

1

I had the same problem, but it is somehow related to the 71th version. The problem is solved in the more decent 72th version despite the fact that it is still not on release. Check here: https://github.com/mrdoob/three.js/issues/6774.

You can find the 72th version here.

edited Aug 4, 2015 at 10:57

answered Aug 4, 2015 at 10:44

Darius Miliauskas

3,5444 gold badges40 silver badges54 bronze badges

1 Comment

ACoder Over a year ago

Thank you for that; that will help in future postings in jsFiddle.

Collectives™ on Stack Overflow

Error involved in displaying images on a shape using Three.js

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related