Javascript 如何在three.js中将子stl文件位置设置在其父位置之上？

基本上我有一个托盘，在托盘上我添加了cube stl文件，看起来像这样

对于立方体stl位置，我使用下面的代码设置每个立方体位置。现在我想设置托盘上方的立方体位置。为了实现这一点，我需要计算每个立方体stl文件的位置。我不知道该怎么做。任何帮助都将不胜感激

mesh.position.set(
          10,
          15,
          20
        );

下面是我用来设置像这样的对象的代码

createScene(canvas: ElementRef<HTMLCanvasElement>): void {
    // The first step is to get the reference of the canvas element from our HTML document

    this.jsonObject = {
      topic: '',
      id: 1,
      to: '',
      from: '',
      createdAt: 1578948378890,
      title: 'Manual load vis test',
      body:
        '',
      object: {
        backgroundColor: '0xffffff',
        height: 208,
        width: 1080,
        camera: {
          position: {
            x: 0,
            y: 90,
            z: 40
          },
          perspectiveCamera: {
            fov: 80,
            near: 1.5,
            far: 1050
          }
        },
        mainObject: {
          fileName: '5_lane_updated.stl',
          color: 14869247,
          scale: {
            x: 0.2,
            y: 0.1,
            z: 0.1
          },
          position: {
            x: -40,
            y: 25,
            z: -10
          }
        },
        products: [
          {
            fileName: 'cube.stl',
            color: 'rgb(20,40,255)',
            scale: {
              x: 1.1,
              y: 0.46,
              z: 1.5
            },
            position: {
              x: -42,
              y: 13,
              z: -10
            }
          },
          {
            fileName: 'cube.stl',
            color: 'rgb(75,255,20)',
            scale: {
              x: 1.1,
              y: 0.46,
              z: 1.5
            },
            position: {
              x: -8,
              y: 13,
              z: -10
            }
          },
          {
            fileName: 'cube.stl',
            color: 'rgb(163,228,247)',
            scale: {
              x: 1.1,
              y: 0.46,
              z: 1.5
            },
            position: {
              x: 25,
              y: 13,
              z: -10
            }
          },
          {
            fileName: 'cube.stl',
            color: 'rgb(20,40,255)',
            scale: {
              x: 1.1,
              y: 0.46,
              z: 1.5
            },
            position: {
              x: 60,
              y: 13,
              z: -10
            }
          },
          {
            fileName: 'cube.stl',
            color: 'rgb(255,51,20)',
            scale: {
              x: 1.1,
              y: 0.46,
              z: 1.5
            },
            position: {
              x: -42,
              y: 13,
              z: 25
            }
          },
          {
            fileName: 'cube.stl',
            color: 'rgb(255,177,20)',
            scale: {
              x: 1.1,
              y: 0.46,
              z: 1.5
            },
            position: {
              x: -8,
              y: 13,
              z: 25
            }
          },
          {
            fileName: 'cube.stl',
            color: 'rgb(250,150,255)',
            scale: {
              x: 1.1,
              y: 0.46,
              z: 1.5
            },
            position: {
              x: 25,
              y: 13,
              z: 25
            }
          },
          {
            fileName: 'cube.stl',
            color: 'rgb(50,168,82)',
            scale: {
              x: 1.1,
              y: 0.46,
              z: 1.5
            },
            position: {
              x: 60,
              y: 13,
              z: 25
            }
          }
        ]
      },
      priority: 1,
      type: 'manually_load_tray'
    };
    this.canvas = canvas.nativeElement;
    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      antialias: true // smooth edges
    });
    this.renderer.setClearColor(
      new THREE.Color(this.jsonObject.backgroundColor)
    );
    this.renderer.shadowMap.enabled = true;
    // create the scene
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(
      this.jsonObject?.camera?.perspectiveCamera?.fov || 100,
      window.innerWidth / window.innerHeight,
      this.jsonObject?.camera?.perspectiveCamera?.near || 0.1,
      this.jsonObject?.camera?.perspectiveCamera?.far || 1000
    );

    this.camera.position.x = this.jsonObject.camera.position.x;
    this.camera.position.y = this.jsonObject.camera.position.y;
    this.camera.position.z = this.jsonObject.camera.position.z;
    this.camera.lookAt(new THREE.Vector3(0, 0, 0));

    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(150, 150, 150);
    this.scene.add(spotLight);
    const loader = new STLLoader();

    loader.load(
      `${ApiUrls.GET_FILE}?file=${this.jsonObject.mainObject.fileName}`,
      geometry => {
        geometry.center();
        const material = new THREE.MeshLambertMaterial({
          color: this.jsonObject.mainObject.color
        });

        const mesh = new THREE.Mesh(geometry, material);
        mesh.scale.set(
          this.jsonObject.mainObject.scale.x,
          this.jsonObject.mainObject.scale.y,
          this.jsonObject.mainObject.scale.z
        );
        mesh.translateZ(10);
        mesh.translateX(10);
        mesh.translateY(10);
        debugger;
        this.group.add(mesh);
      }
    );

    this.jsonObject.products.forEach(product => {
      loader.load(`${ApiUrls.GET_FILE}?file=${product.fileName}`, geometry => {
        geometry.center();
        const material = new THREE.MeshLambertMaterial({
          color: product.color
        });

        const mesh = new THREE.Mesh(geometry, material);
        mesh.scale.set(product.scale.x, product.scale.y, product.scale.z);

        mesh.position.set(
          product.position.x,
          product.position.y,
          product.position.z
        );
        this.group.add(mesh);
      });
    });
    this.scene.add(this.group);
  }

createScene（canvas:ElementRef）：void{
//第一步是从HTML文档中获取canvas元素的引用
this.jsonObject={
主题：“”，
id:1，
至：''，
从：“”，
创建日期：1578948378890，
标题：“手动负载可视测试”，
正文：
'',
对象：{
背景颜色：“0xffffff”，
身高：208，
宽度：1080，
摄像机：{
职位：{
x:0,，
y:90，
z:40
},
透视照相机：{
视野：80，
接近：1.5，
传真：1050
}
},
主要对象：{
文件名：“5_lane_updated.stl”，
颜色：14869247，
比例：{
x:0.2，
y:0.1，
z:0.1
},
职位：{
x:-40，
y:25，
z:-10
}
},
产品：[
{
文件名：“cube.stl”，
颜色：“rgb（20,40255）”，
比例：{
x:1.1，
y:0.46，
z:1.5
},
职位：{
x:-42，
y:13，
z:-10
}
},
{
文件名：“cube.stl”，
颜色：“rgb（75255,20）”，
比例：{
x:1.1，
y:0.46，
z:1.5
},
职位：{
x:-8，
y:13，
z:-10
}
},
{
文件名：“cube.stl”，
颜色：“rgb（163228247）”，
比例：{
x:1.1，
y:0.46，
z:1.5
},
职位：{
x:25，
y:13，
z:-10
}
},
{
文件名：“cube.stl”，
颜色：“rgb（20,40255）”，
比例：{
x:1.1，
y:0.46，
z:1.5
},
职位：{
x:60，
y:13，
z:-10
}
},
{
文件名：“cube.stl”，
颜色：“rgb（255,51,20）”，
比例：{
x:1.1，
y:0.46，
z:1.5
},
职位：{
x:-42，
y:13，
z:25
}
},
{
文件名：“cube.stl”，
颜色：“rgb（255177,20）”，
比例：{
x:1.1，
y:0.46，
z:1.5
},
职位：{
x:-8，
y:13，
z:25
}
},
{
文件名：“cube.stl”，
颜色：“rgb（250150255）”，
比例：{
x:1.1，
y:0.46，
z:1.5
},
职位：{
x:25，
y:13，
z:25
}
},
{
文件名：“cube.stl”，
颜色：“rgb（50168,82）”，
比例：{
x:1.1，
y:0.46，
z:1.5
},
职位：{
x:60，
y:13，
z:25
}
}
]
},
优先事项：1，
类型：“手动加载托盘”
};
this.canvas=canvas.nativeElement；
this.renderer=new THREE.WebGLRenderer({
canvas:this.canvas，
抗锯齿：真//平滑边
});
this.renderer.setClearColor(
新的三种颜色（this.jsonObject.backgroundColor）
);
this.renderer.shadowMap.enabled=true；
//创建场景
this.scene=新的三个.scene（）；
this.camera=新的3.perspective相机(
这个.jsonObject？.camera？.Perspective camera？.fov | | 100，
window.innerWidth/window.innerHeight，
这个.jsonObject？.camera？.perspectiveCamera？.near | | | 0.1，
这个.jsonObject？.camera？.perspectiveCamera？.far | 1000
);
this.camera.position.x=this.jsonObject.camera.position.x；
this.camera.position.y=this.jsonObject.camera.position.y；
this.camera.position.z=this.jsonObject.camera.position.z；
这个.camera.lookAt（新的3.Vector3（0,0,0））；
常量聚光灯=新的三个聚光灯（0xffffff）；
聚光灯位置设置（150150150）；
this.scene.add（聚光灯）；
const-loader=新的stl-loader（）；
装载机(
`${apirls.GET_FILE}？FILE=${this.jsonObject.mainObject.fileName}`，
几何图形=>{
几何中心（）；
const material=新的三点材质({
颜色：this.jsonObject.mainObject.color
});
常量网格=新的三个网格（几何体、材质）；
mesh.scale.set(
这个.jsonObject.mainObject.scale.x，
这个.jsonObject.mainObject.scale.y，
这个.jsonObject.mainObject.scale.z
);
mesh.translateZ（10）；
translateX（10）；
mesh.translateY（10）；
调试器；
此.group.add（网格）；
}
);
this.jsonObject.products.forEach（product=>{
loader.load（`${APIRLs.GET_FILE}？FILE=${product.fileName}`，geometry=>{
几何中心（）；
const material=新的三点材质({
颜色：product.color
});
常量网格=新的三个网格（几何体、材质）；
网格.scale.set（产品.scale.x，产品