CODEWITHSUNDEEP
javascriptjsonthree.jsblender
ACoder
ACoder

Reputation: 107

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

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"
}

Upvotes: 1

Views: 312

Answers (2)

gaitat
gaitat

Reputation: 12632

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

enter image description here enter image description here

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.

Upvotes: 1

Darius Miliauskas
Darius Miliauskas

Reputation: 3504

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.

Upvotes: 1

Related Questions