Question

我有一个3D模型，包含许多子网格物体我想“爆炸”那个网格......这意味着每个子网格都必须完全像那个线程一样远离中心点：
Exploded view algorithm for CAD

为此，我使用THREE.Box3生成祖先网格的边界框，并使用.getCenter()计算中心。

这里的问题来自于三个JS的场景图...... 当设置每个孩子的位置时，整个3D模型在我设置为在所有方向（XYZ）上都会爆炸，但是当我选择其他组合（如单独的X）时，爆炸会在所有方向上发生错误和蔓延不，或根本不爆炸。

以下是我正在使用的代码：

/**
 * obj : the current node on the scene graph
 * box_ct_world : a vec3 center of the bounding box
 * 
 */
  explode : function(obj , parent ,  box_ct_world , dif){
    var scene = this.el.sceneEl.object3D ; //I am using Aframe , so this is how I retrieve the whole scene . 
    var object = this.el.object3D ; //same here , this for retrieving the whole 3D model .  
    var speed = 1 ; 

    if(obj instanceof THREE.Mesh){
      var box_center = box_ct_world ; 
      var position = obj.position ; 
      /**
       * so this is the beginning of my troubles : I am considering retrieving a world position instead of a local position... 
       * I have to translate the nodes without the parent matrices interfering . 
       * The current ligne works the same way as if I retrieved local transformations ... exploding on XYZ , but glitching on the other cases . 
       */ 
     position.setFromMatrixPosition(scene.matrixWorld) ; 

     var addx =0 ;
     var addy =0 ;
     var addz =0 ; 

     /**
      * This is the vector from the center of the box to the node . we use that to translate every meshes away from the center
      */
      if(this.data.X === true){
      var addx =(position.x - box_center.x)*this.data.factor *speed ; 

      }
      if(this.data.Y === true){
      var addy =(position.y - box_center.y)*this.data.factor *speed;
      }
      if(this.data.Z === true){
      var addz =(position.z - box_center.z)*this.data.factor *speed; 
      }

      var explode_vectorx=  addx;
            var explode_vectory=  addy;
      var explode_vectorz=  addz;

      /**
       * this is for making the nodes translate back to their original locations
       */
      if(diff < 0 ){
        if(explode_vectorx > 0)
          explode_vectorx = -explode_vectorx ; 
        if(explode_vectory > 0)
          explode_vectory = -explode_vectory; 
        if(explode_vectorz > 0)
          explode_vectorz = -explode_vectorz;


      }
      if(diff > 0 ){
        if(explode_vectorx < 0)
          explode_vectorx = -explode_vectorx ; 
        if(explode_vectory < 0)
          explode_vectory = -explode_vectory; 
        if(explode_vectorz < 0)
          explode_vectorz = -explode_vectorz;
      }


      var vector = new THREE.Vector3(explode_vectorx , explode_vectory, explode_vectorz) ; 
      console.log(vector.x+"    " + vector.y+ "    " + vector.z ); 
      /**
       * and here is my biggest problem :
       * this function seems to use ancestors matrices 
       * I need the nodes to move without calling the ancestors matrices , but still keep their original rotation and scale . 
       */
      obj.position.set(vector.x , vector.y , vector.z ) ;

      if(obj.children.length != 0 ){
        for(var i = 0 ; i < obj.children.length ; i++){
          this.explode(obj.children[i] ,obj,  box_ct_world , dif); 
        }
      }

      }

        else{
            if(obj.children.length != 0 )
                {
                    for(var i = 0 ; i < obj.children.length ; i++){

                        this.explode(obj.children[i] ,obj,  box_ct_world , dif); 

       }            
                }
    }
},

所以这是使用XYZ爆炸的截图：

它工作得很好。

但是当使用单轴时，如X：

当它应该仅在X轴上平移时，网格仍然在所有轴上，就好像它是随机的一样。我认为这可以通过直接在世界空间中翻译网格来解决，但我不知道如何在threeJS中完成，尤其是在那种情况下，因为我无法更改matrixWorld中的值（一帧正在更新世界矩阵）我认为对于这些对象的每一帧，所以即使我在matrixWorld中更改任何值，这些也将被覆盖）谢谢大家的帮助。

如何在ThreeJs中爆炸3D模型组？

0 个答案: