CODEWITHSUNDEEP
javascripthtml3dwebgl
Kirby
Kirby

Reputation: 455

How to import and manipulate 3D objects in HTML

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!

Upvotes: 1

Views: 7562

Answers (1)

jmunsch
jmunsch

Reputation: 24089

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,

Upvotes: 2

Related Questions