时间戳

首页 > 解决方案 > 在 JSModeler 中围绕它们的中心旋转一组对象

jsmodeler - 在 JSModeler 中围绕它们的中心旋转一组对象

问题描述

我正在使用带有三个.js 扩展名的 JSModeler。我的查看器是 JSM.ThreeViewer()。代码笔是： https ://codepen.io/Dharnidharka/pen/QRzBQa

我想要实现的是同心圆围绕它们的中心旋转，但目前旋转是关于世界中心的。

  1. 在three.js 中，这可以通过拥有一个父Object3D，并将所有网格添加到该对象，使用geometry.center() 使该对象居中然后进行旋转来完成。但我找不到 JSModeler 的 Object3D 扩展。
  2. three.js 中的另一种方法可能是围绕一个公共枢轴对对象进行分组，但即使这种方法对我也不起作用。
  3. 我尝试的第三种方法是What's the right way to rotate an object around a point in three.js？，在 Update() 循环中，但这也不起作用

我使用以下方法将对象移动到枢轴点：

  meshes = JSM.ConvertModelToThreeMeshes (model);

  viewer.AddMeshes (meshes);

  for(var i =3; i<10; i++) {

    meshes[i].geometry.computeBoundingBox();
    meshes[i].geometry.boundingBox.getCenter(center);
    meshes[i].geometry.center();
    var newPos = new THREE.Vector3(-center.x, -center.y, -center.z);
    meshes[i].position.copy(newPos);

  }

预期的输出是 2 个圆围绕共同中心旋转，该中心也将是世界中心。目前，它们围绕世界中心旋转，而不是围绕它们的共同中心旋转。

标签： jsmodeler

解决方案

终于想通了。

在上面发布的代码中，我将几何图形居中，然后将它们移回原来的位置。需要的是使几何图形居中，然后围绕中心相对于彼此移动网格，以免配置混乱。有 2 个网格组。必须为每个计算中间值，然后相应地转换几何图形。代码中的解决方案：

   var center = new THREE.Vector3();
   var mid1 = new THREE.Vector3();

    for(var i =0; i<len1; i++) {

        viewer.GetMesh(i).geometry.computeBoundingBox();
        viewer.GetMesh(i).geometry.boundingBox.getCenter(center);
        viewer.GetMesh(i).geometry.verticesNeedUpdate = true;
        mid1.x += center.x;
        mid1.y += center.y;
        mid1.z += center.z;

      }

      mid1.x = mid1.x / len1;
      mid1.y = mid1.y / len1;
      mid1.z = mid1.z / len1;

      for(var i = 0; i<len1; i++) {

        viewer.GetMesh(i).geometry.computeBoundingBox();
        viewer.GetMesh(i).geometry.boundingBox.getCenter(center);
        viewer.GetMesh(i).geometry.center();
        var newPos = new THREE.Vector3(center.x - mid1.x, center.y - mid1.y, center.z - mid1.z);
        viewer.GetMesh(i).geometry.translate(newPos.x, newPos.y, newPos.z);

      }

推荐阅读