如何在HTML中导入和操作三维对象

How to import and manipulate 3D objects in HTML

本文关键字：操作 三维 对象 导入 HTML      更新时间：2023-09-26

我正在一个包含3D地图的web项目中工作，我想知道导入地图并能够单击地图上的不同对象（最好是使用对象ID触发javascript事件）的最佳/最简单方法是什么。

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

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

谢谢！

我能想到两个与使用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/
  • 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动画，并且可能有更少的功能来完成你想要做的事情

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

相关文章：