Scenejs Rectangular Prism texture preserving aspect ratio

90 views Asked by At

I am a newbie to Scenejs with the following problem. I get 30 to 50 thumbnail images from a query. The images have width around 200 px and height 100px to 300px. I want to present each thumbnail images as texture on separate rectangular prisms arranged in a 3d scene. Many of the examples I researched show only cubes and with uniform square images. When I tried to adjust the geometry of the rectangular prisms the images appear multiple times. Code excerpts given below. Can some one point me in the right direction?

function get_Json_test_data()
{

var wiki_node_top =[{ 
           type: "cameras/orbit",
            yaw:  0,
            pitch: 0,
            zoom: 10,
            zoomSensitivity:0.5,

                    nodes: [
                {
                    type: "material",
                     id: "myMaterial",
                    color: { r: 1, g: 1, b: 1.0 } 
                }
                   ]
                }];

   scene = SceneJS.createScene({

   nodes: wiki_node_top 
});

}

function add_node_wiki (json1)
{
var wiki_x=-4;
var wiki_y=-4;
var wiki_z=0;
var test1 = json1.query.pages;
var test2 = [];
var icount = 0;
$.each(test1, function (i, item) {
    test2[icount] = item;
    icount++;
});
$.each(test2, function (i, item) {
   var   wiki_x_size=item.imageinfo[0].thumbwidth/200;
   var  wiki_y_size=item.imageinfo[0].thumbheight/200;

wiki_x +=2*wiki_x_size;
wiki_y += 2*wiki_y_size;

    update_scene(item, wiki_x,wiki_y,wiki_z,wiki_x_size,wiki_y_size);     
});   
}
function update_scene(item, wiki_x,wiki_y,wiki_z,wiki_x_size,wiki_y_size)
{
scene.getNode("myMaterial",
function(myMaterial) {
    myMaterial.addNode({         
                      type: "texture",
                      src: item.imageinfo[0].thumburl,                                                 
                      wrapS: "ClampToEdgeWrapping",
                      wrapT: "ClampToEdgeWrapping",     
       nodes:[{
            type: "translate",                
            x: wiki_x,
            y: wiki_y,
            z: wiki_z,
            nodes: [{
                type: "geometry/box",
                xSize: wiki_x_size,
                ySize: wiki_y_size,
                zSize: 1
            }]
        }]                                                                                              
});  
})

}

1

There are 1 answers

0
xeolabs On

SceneJS texture params, like those for "wrapS" and "wrapT", are camelcase representations of the WebGL enums.

So, since "ClampToEdgeWrapping" is not a supported value in WebGL (to my knowledge), then SceneJS won't recognise that.

See the map of supported enums here: https://github.com/xeolabs/scenejs/blob/v4.0/src/core/webgl/enums.js

Maybe try "clampToEdge"?