1

I'm working in a web project that includes a 3D map and I'm wondering what's the best/simplest way to import the map and be able to click different objects on it (ideally firing a javascript event with the ID of the object).

I basically know nothing about 3D, but the person that's working with me tells me they can export the map in a variety of 3D formats, so that shouldn't be a problem.

I've searched for a couple of days and found some options (like x3dom), but I would like to see what more experienced people think.

Thank you!

Kirby
  • 455
  • 6
  • 23
  • 1
    Unless users need to rotate or orbit the map, you might consider exporting it to SVG, and then embed the SVG in your HTML with JavaScript listening for events. – BenjaminGolder Nov 01 '15 at 04:37
  • I'm still in talks about what to do, so that may as well work, thank you! – Kirby Nov 01 '15 at 06:22

1 Answers1

2

I can think of two libaries that work with 3d models that use webgl.

The threejs library and its OBJloader

The example given:

// instantiate a loader
var loader = new THREE.OBJLoader();

// load a resource
loader.load(
    // resource URL
    'models/skinned/UCS_config.json',
    // Function when resource is loaded
    function ( object ) {
        scene.add( object );
    }
);

This library is geared towards 3d stuff see the examples:

Or, Another possibility is the famousjs library and its OBJloader

And their example:

// Add the device view to our scene.

var deviceNode = scene.addChild()
    .setOrigin(0.5, 0.5, 0.5)
    .setAlign(0.5, 0.5, 0.5)
    .setMountPoint(0.5, 0.5, 0.5)
    .setRotation(0.2)
    .setSizeMode(1, 1, 1)
    .setPosition(0, 0, 200)
    .setAbsoluteSize(600, 600, 600);

var deviceView = new DeviceView(
    deviceNode
);

OBJLoader.load('obj/macbook.obj', function(geometries) {
    // Create custom geometries here
});

However, famousjs is more geared towards UI animations, and might have fewer features to accomplish what you are looking to do.

There are of course other formats, but that is going to depend on what sort of assets you plan to use, and what programs are being used to create them,

Community
  • 1
  • 1
jmunsch
  • 22,771
  • 11
  • 93
  • 114
  • @Kirby one other thing i figure might be helpful if using threejs learn how to use `nvm` by creationix, and then figure out how to use `npm` and then `npm install http-server -g` in your working directory, that way you can serve up static assets locally without getting cross origin issues. Basically its a quick way to setup a `node` server without being overly complicated with how routers like `express` work. – jmunsch Nov 01 '15 at 14:34
  • @Kirby There are of course other options, like `apache`, or `nginx`, but `node` understands javascript, and its a great thing to learn for someone looking into a "full stack" sort of project, because there is less context switching between languages. – jmunsch Nov 01 '15 at 14:50