如何在HTML中导入和操作3D对象

时间:2015-11-01 02:26:28

标签: javascript html html5 3d webgl

我在一个包含3D地图的网络项目中工作,我想知道导入地图的最佳/最简单的方法是什么,并且能够点击它上面的不同对象(理想情况下触发ID为的javascript事件对象)。

我基本上对3D一无所知,但与我合作的人告诉我他们可以以各种3D格式导出地图,所以这应该不是问题。

我搜索了几天并找到了一些选项(例如x3dom),但我想看看更有经验的人会怎么想。

谢谢!

1 个答案:

答案 0 :(得分:2)

我可以想到两个与使用webgl的3d模型一起工作的库。

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东西,请参阅示例:

或者,另一种可能性是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更倾向于使用UI动画,并且可能没有更少的功能来完成你想要做的事情。

当然还有其他格式,但这取决于您计划使用哪种资产,以及用于创建它们的程序,