网页上基于3DSMax .obj / .max的模型显示与AJAX可点击功能集成

Question

我有一个基于.obj和.max文件格式的3DSMax模型。该模型具有多个可单击点的区域，这些区域在3DSMax中运行良好。单击这些点将显示这些区域的详细信息。

我必须在Web上显示具有所有这些可单击功能的交互式模型。另外，我还必须使用AJAX将那些可点击区域的信息保存在数据库中，以便当用户单击该模型的任何区域时，它将发出AJAX请求。

我也检查了这个线程

在所附的图像中，模型上标有各种区域。所有这些区域都必须是可单击的，并且应该能够使用AJAX捕获详细信息。

我可以按照此示例使用three.js在Web上加载此模型，但是这些可点击区域不起作用。我无法执行任何点击，也无法创建任何AJAX请求。

我正在使用.obj文件，因为无法加载.max文件。

var loader = new THREE.OBJLoader();

// load a resource
loader.load('models/monster.obj', function(object) {
  scene.add(object);
}, function(xhr) {
  console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, function(error) {
  console.log('An error happened');
});

Answer 1

对您来说更简单的方法是将 3ds Max 中的这些区域分成不同的对象（选择并分离多边形），然后在单击事件上使用Raycaster来捕获单击的内容；并用于intersects[0].object存储单击的内容。但您也可以对纹理使用光线投射来查看单击 UV 上的位置，但您的网格必须正确展开。请参阅此处的 Three.js 代码示例：链接