Javascript document.getElementById（）.setAttribute（）在X3D中无法正常工作

我正在尝试使用X3D绘制存储在另一个文件中的点的曲面。我使用IndexedTriangleSet和坐标来设置点并形成曲面。但由于这些点可能会发生变化，我不能简单地使用以下代码（假设在“index=”和“point=”之后有信息）：

相反，我必须使用javascript从另一个文件中获取点和三角形，并使用以下代码进行设置：

   <script>

            var a = [];
            var b = [];
            var c = [];
            var tria = [];
            var trib = [];
            var tric = [];

            var str = "";
            var str_tri = "";


            fetch("Volume63.json")
                .then(response => response.json())
                .then(data => {

                    for(var cont in data.axis_xyz_inside_silo){
                        a.push(data.axis_xyz_inside_silo[cont].x);
                        b.push(data.axis_xyz_inside_silo[cont].y);
                        c.push(data.axis_xyz_inside_silo[cont].z);
                        str += (`${a[cont]} ${b[cont]} ${c[cont]}, `);
                    }

                    str = str.slice(0, -2);
                    console.log(a.length);

                fetch("triangulos_63.json")
                    .then(response => response.json())
                    .then(data => {

                        for(var cont in data.triangulos){
                            tria.push(data.triangulos[cont].tri_a);
                            trib.push(data.triangulos[cont].tri_b);
                            tric.push(data.triangulos[cont].tri_c);
                            str_tri += (`${tria[cont]} ${trib[cont]} ${tric[cont]}, `);
                        }

                        str_tri = str_tri.slice(0, -2);

                        document.getElementById('tri').setAttribute('index', str_tri);
                        document.getElementById('pts').setAttribute('point', str);

                        console.log(str);
                        console.log(str_tri);

                })
            })
            
            console.log("acabou");
    </script>

var a=[]；
var b=[]；
var c=[]；
var-tria=[]；
var-trib=[]；
var=[]；
var str=“”；
var str_tri=“”；
获取（“Volume63.json”）
.then（response=>response.json（））
。然后（数据=>{
用于（var cont in data.axis\U xyz\U silo内的var cont）{
a、 推送（数据.axis_xyz_in_silo[cont].x）；
b、 推送（数据.axis_xyz_in_silo[cont].y）；
c、 推送（数据.axis_xyz_-in_-silo[cont].z）；
str+=（`a[cont]}${b[cont]}${c[cont]}，`）；
}
str=str.slice（0，-2）；
控制台日志（a.长度）；
fetch（“triangulos_63.json”）
.then（response=>response.json（））
。然后（数据=>{
for（数据中的变量cont.triangulas）{
tria.push（data.triangulos[cont].tri_a）；
trib.push（data.triangulos[cont].triu-b）；
tric.push（data.triangulos[cont].tri_c）；
str_tri+=（`${tria[cont]}${trib[cont]}${tric[cont]}，`）；
}
str_tri=str_tri.切片（0，-2）；
document.getElementById（'tri'）.setAttribute（'index'，str_tri）；
document.getElementById（'pts'）.setAttribute（'point'，str）；
console.log（str）；
控制台日志（str_tri）；
})
})
控制台日志（“acabou”）；

但出于某种原因，当我使用javascript时，我会得到如下图像：

如果我直接在“index=”和“point=”之后复制并粘贴字符串“str_tri”和“str”，它会正常工作（我不能在这里插入多个图像）

可能这个问题是因为我使用了大量的点（7500）。但是我试着减少分数，但仍然没有达到应有的效果

   <script>

            var a = [];
            var b = [];
            var c = [];
            var tria = [];
            var trib = [];
            var tric = [];

            var str = "";
            var str_tri = "";


            fetch("Volume63.json")
                .then(response => response.json())
                .then(data => {

                    for(var cont in data.axis_xyz_inside_silo){
                        a.push(data.axis_xyz_inside_silo[cont].x);
                        b.push(data.axis_xyz_inside_silo[cont].y);
                        c.push(data.axis_xyz_inside_silo[cont].z);
                        str += (`${a[cont]} ${b[cont]} ${c[cont]}, `);
                    }

                    str = str.slice(0, -2);
                    console.log(a.length);

                fetch("triangulos_63.json")
                    .then(response => response.json())
                    .then(data => {

                        for(var cont in data.triangulos){
                            tria.push(data.triangulos[cont].tri_a);
                            trib.push(data.triangulos[cont].tri_b);
                            tric.push(data.triangulos[cont].tri_c);
                            str_tri += (`${tria[cont]} ${trib[cont]} ${tric[cont]}, `);
                        }

                        str_tri = str_tri.slice(0, -2);

                        document.getElementById('tri').setAttribute('index', str_tri);
                        document.getElementById('pts').setAttribute('point', str);

                        console.log(str);
                        console.log(str_tri);

                })
            })
            
            console.log("acabou");
    </script>