document.getElementById().setAttribute() 在 X3D 中无法正常工作

Question

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

   <IndexedTriangleSet id='tri'
                        ccw='true' 
                        colorPerVertex='true' 
                        index=''
                        solid='false'
                        containerField='geometry'>
                        <Coordinate id="pts"
                            point=''/>
                        <Viewpoint
                            position='0 0 100'/>
   </IndexedTriangleSet>

相反，我必须使用 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>

但出于某种原因，当我使用 javascript 时，我得到了这样的图像：

如果我直接在“index=”和“point=”之后复制并粘贴字符串“str_tri”和“str”，它可以正常工作（我无法在此处插入多个图像）。

这个问题的发生可能是因为我使用了大量的点 (7500)。但是我尝试减少点数，它仍然无法正常工作。