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

Question

我在一个包含 3D 地图的网络项目中工作，我想知道导入地图并能够点击地图上的不同对象的 best/simplest 方法是什么（理想情况下触发 javascript 带有对象 ID 的事件）。

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

我搜索了几天，找到了一些选项（比如x3dom），但我想看看更有经验的人是怎么想的。

谢谢！

Answer 1

我能想到两个与使用 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 内容，请参阅示例：

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 更适合 UI 动画，可能具有较少的功能来完成您想要做的事情。

当然还有其他格式，但这取决于您打算使用哪种资产，以及使用什么程序来创建它们，

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

How to import and manipulate 3D objects in HTML

html

javascript

3d

webgl