javascript - 爆炸或移动网格远离中心

Question

我正在尝试移动所有构成加载的 obj 文件的网格，使它们彼此远离，以便用户可以看到所有网格。

我正在尝试模仿下面的例子

Demo

转到链接，单击 UI 托盘中的爆炸图标并移动 slider 。

到目前为止我做了什么 我可以访问模型的所有网格 所以我可以对它们应用任何功能。 到目前为止，我已经遍历了它们并给了它们随机位置向量。

它工作正常，整个模型爆炸，因此每个网格都单独可见。

问题

通过给定随机位置向量，它们显然会移动到随机位置。我想像共享链接一样移动它们。任何帮助，将不胜感激。 我是这个很棒的 threejs 的新手，我真的很想了解更多。 提前致谢

编辑 示例代码

    function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
for(var i = 0; i < mainStand.children.length; i++)
{
    pos1 = getRandomArbitrary(1 , 2);
    pos2 = getRandomArbitrary(1 , 2);
    pos3 = getRandomArbitrary(1 , 2);
    mainStand.children[i].position.set(pos1 , pos2 , pos3);
}

其中mainStand是加载的obj Model

Answer 1

您要做的是将每个网格远离 中心位置。这是通过计算网格位置和中心之间的向量，然后沿着这个方向移动网格来完成的:

var center = new THREE.Vector3(0, 0, 0);
var distanceToMove = 0.1;

for (var i = 0; i < mainStand.children.length; i++) {
    var meshPosition = mainStand.children[i].position;

    var direction = meshPosition.clone().sub(center).normalize();

    var moveThisFar = direction.clone().multiplyScalar(distanceToMove);

    mainStand.children[i].position.add(moveThisFar);
}