我怎么能把两个字符串与索引en点到Three.js BufferGeometry

How can i put two strings with indices en points into Three.js BufferGeometry?

本文关键字：en 索引 点到 Three BufferGeometry js 字符串 两个 怎么能      更新时间：2023-09-26

我有一个数据库，其中包含10,000个对象的各种信息，包括它们的3D网格。目前，我正试图使这些对象在web浏览器中使用Three.js可见。

关于对象的信息来自另一方，所以我只能在得到它时使用它。查询数据库，我得到以下信息:

indices: 0;1;2;3;0;2;4;5;2;1;4;2;1;6;7;8;6;9;6;1;9;10;11;12;6;12;11;11;7;6;13;4;1;4;13;14;7;13;1;7;15;13;16;13;15;15;7;17;18;19;7;19;17;7;20;21;22;19;22;21;19;21;17;14;23;4;18;24;25;26;19;25;20;27;28;26;27;22;21;20;28;11;29;7;29;24;7;24;18;7;25;19;18;22;19;26;27;20;22;28;30;21;15;31;32;33;16;32;14;34;35;33;34;13;23;35;36;17;21;30;31;15;17;32;16;15;33;13;16;14;13;34;35;23;14;17;30;31;4;36;37;38;5;37;3;39;40;38;39;2;0;40;41;36;4;23;37;5;4;38;2;5;39;3;2;0;3;40;41;1;0;41;42;1;8;43;44;45;6;44;10;46;47;45;46;12;11;47;29;43;9;42;43;8;9;42;9;1;44;6;8;45;12;6;10;12;46;47;11;10;38;37;36;38;36;39;42;41;40;39;42;40;39;33;44;35;34;36;33;36;34;32;31;33;39;36;33;31;27;33;42;39;43;44;33;27;45;44;46;47;46;27;44;27;46;47;24;29;28;27;30;30;27;31;26;25;27;24;27;25;27;24;47;44;43;39
points: -155.751724243164;106.251846313477;-20000;-127.281639099121;110;-20000;-205.063369750977;77.7817459106445;-20000;-182.281646728516;95.2627868652344;-20000;-233.533477783203;28.4700946807861;-20000;-222.54443359375;55;-20000;-49.4998893737793;77.7817459106445;-20000;-21.0297946929932;-28.4700946807861;-20000;-72.2816314697266;95.2627868652344;-20000;-98.8115386962891;106.251846313477;-20000;-21.0297946929932;28.4700946807861;-20000;-17.2816352844238;1.91109225666786E-10;-20000;-32.0188407897949;55;-20000;-222.54443359375;-55;-20000;-233.533477783203;-28.4700946807861;-20000;-182.281646728516;-95.2627868652344;-20000;-205.063369750977;-77.7817459106445;-20000;-155.751724243164;-106.251846313477;-20000;-32.0188407897949;-55;-20000;-49.4998893737793;-77.7817459106445;-20000;-98.8115386962891;-106.251846313477;-20000;-127.281639099121;-110;-20000;-72.2816314697266;-95.2627868652344;-20000;-237.281631469727;1.90042967473936E-10;-20000;-21.0297946929932;-28.4700946807861;0;-32.0188407897949;-55;0;-49.4998893737793;-77.7817459106445;0;-72.2816314697266;-95.2627868652344;0;-98.8115386962891;-106.251846313477;0;-17.2816352844238;-1.38817108849554E-11;0;-127.281639099121;-110;0;-155.751724243164;-106.251846313477;0;-182.281646728516;-95.2627868652344;0;-205.063369750977;-77.7817459106445;0;-222.54443359375;-55;0;-233.533477783203;-28.4700946807861;0;-237.281631469727;-1.63157647115053E-11;0;-233.533477783203;28.4700946807861;0;-222.54443359375;55;0;-205.063369750977;77.7817459106445;0;-182.281646728516;95.2627868652344;0;-155.751724243164;106.251846313477;0;-127.281639099121;110;0;-98.8115386962891;106.251846313477;0;-72.2816314697266;95.2627868652344;0;-49.4998893737793;77.7817459106445;0;-32.0188407897949;55;0;-21.0297946929932;28.4700946807861;0

现在我正在努力把这个放到Three.js的BufferGeometry中。如果我按照http://threejs.org/examples/#webgl_buffergeometry_uint的例子，我想我必须使用:

var triangles = 276;
var geometry = new THREE.BufferGeometry();
var indices = new Uint32Array(triangles * 3);

但是我怎么能输入我的索引字符串/数组和我的点到缓冲区?

编辑

使用答案@mlkn给我解决了我的问题。由于我的索引顶点来自数据库，我在php(服务器端)中调整了字符串，因此客户端不需要进行循环。我的代码现在看起来像这样:

var vertices = new Float32Array([-155.751724243164,106.251846313477,-20000,...]);
var indices = new Uint16Array([0,1,2,3,0,2,4,5,2,...]);
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
var material = new THREE.MeshBasicMaterial({color: 0xffbb0f});
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

…而且效果很好!

首先需要将字符串转换为类型化数组。假设数据正确:

var i, length;
var tmp = indicesData.split(';');
var indices = new Uint16Array(tmp.length);
for (i = 0; i < tmp.length; i++) {
    indices[i] = parseInt(tmp[i]);
}
tmp = verticesData.split(';');
var vertices = new Float32Array(tmp.length);
for (i = 0; i < tmp.length; i++) {
    vertices[i] = parseFloat(tmp[i]);
}

之后，创建几何/材料，创建网格并将其添加到场景:

var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
var material = new THREE.MeshBasicMaterial({color: 0xffbb0f});
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

当你得到新的数据时，你可以添加新的网格或更新现有几何图形的缓冲区。如果您不确定数据大小是否合适，并且没有索引超出顶点范围，请检查以避免运行时错误。

还有一篇关于索引绘图的文章

相关文章：