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
}]
}]
});
})
}
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"?