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);
}