This example features a 3D menu created out of SVG shapes to 3D icons using Blender. It also demonstrates events risen from an object action, that can be captured and custom javascript functions can be called when activating a menu option.
Use your keyboard arrows to move, enter to trigger the action
var newMenu = new tombraidermenu('demo');
newMenu.setConfig(jsonConfig);
$("body").keydown(function(e) {
if(e.keyCode == 37) {
newMenu.moveLeft();
$("#selected").html(newMenu.getSelectedName());
}
else if(e.keyCode == 39) {
newMenu.moveRight();
$("#selected").html(newMenu.getSelectedName());
}
else if(e.keyCode == 13) {
newMenu.action();
}
document.addEventListener("action", function(e) {
$("#slider").slideToggle();
console.log("The selected index is: "+e.detail.selected);
});
});
{"objects":[
{"name":"Github","action":"","params":"","model":"models/github.json"},
{"name":"Map","action":"","params":"","model":"models/map.json"},
{"name":"Speaker","action":"","params":"","model":"models/speaker.json"},
{"name":"Home","action":"","params":"","model":"models/home.json"},
{"name":"Notification","action":"","params":"","model":"models/notification.json"},
{"name":"Retweet","action":"","params":"","model":"models/retweet.json"}
],"distance":11600,"height":2400,"radius":4000}