Как импортировать и обрабатывать 3D-объекты в HTML

Question

Я работаю в веб-проекте, который включает в себя 3D-карту, и мне интересно, какой лучший/самый простой способ импортировать карту и иметь возможность нажимать на нее различные объекты (в идеале обстреливая событие javascript с идентификатором объекта).

Я ничего не знаю о 3D, но человек, который работает со мной, говорит мне, что они могут экспортировать карту в различных трехмерных форматах, так что это не должно быть проблемой.

Я искал пару дней и нашел несколько вариантов (например, x3dom), но я хотел бы посмотреть, что думают более опытные люди.

Спасибо!

Answer 1

Я могу представить себе два экземпляра, которые работают с 3d-моделями, использующими webgl.

threejs библиотека и ее OBJloader

Пример, приведенный:

// 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); 
    } 
); 

Эта библиотека ориентирована на 3D-материал увидеть примеры:

• http://threejs.org/examples/
• Dynamic bones animation in Three.js

Или Другой возможностью является библиотека famousjs и его OBJloader

И их пример:

// 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 
}); 

Однако famousjs более ориентирована на анимации пользовательского интерфейса, и может иметь меньше возможностей сделать то, что вы желая сделать.

Есть, конечно, других форматы, но это будет зависеть от того, каких активов вы планируете использовать, и какие программы используются для их создания,