在three.js中每帧更新bufferGeometry的索引

时间:2018-01-03 07:51:56

标签: javascript three.js buffer-geometry

我必须在循环函数中更新bufferGeometry的索引,但只能更新未分配的索引。如果为索引数组的元素赋值,则它不能我在下次分配了一个新值。我搜索了一些问题,例如mesh.geometry.index.needsUpdate = true;,但它没有效果。

这是我的代码,它通过bufferGeometry创建一个新的Mesh。

    var geometry = new THREE.BufferGeometry();

    var pBuff = new ArrayBuffer(MAX_POINTS*3*4);
    var positions = new Float32Array(pBuff);

    var indices = new ArrayBuffer(MAX_POINTS*2*3);
    var iIndices = new Uint16Array(indices);

    positions[0] = 1.0;
    positions[1] = 1.0;
    positions[2] = 1.0;

    positions[3] = 1.0;
    positions[4] = 1.0;
    positions[5] = -1.0;

    positions[6] = -1.0;
    positions[7] = 1.0;
    positions[8] = -1.0;

    positions[9] = -1.0;
    positions[10] = 1.0;
    positions[11] = 1.0;

    positions[12] = 1.0;
    positions[13] = -1.0;
    positions[14] = 1.0;

    positions[15] = 1.0;
    positions[16] = -1.0;
    positions[17] = -1.0;

    positions[18] = -1.0;
    positions[19] = -1.0;
    positions[20] = -1.0;

    positions[21] = -1.0;
    positions[22] = -1.0;
    positions[23] = 1.0;

    iIndices[0] = 0;
    iIndices[1] = 1;
    iIndices[2] = 2;

    iIndices[3] = 2;
    iIndices[4] = 3;
    iIndices[5] = 0;

    geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
    geometry.setIndex(new THREE.BufferAttribute(iIndices, 1));
    cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 'rgb(255, 255, 0)', side: THREE.DoubleSide}));

    scene.add(cube);

我的代码更新了循环函数中的索引。

var iIndices = cube.geometry.getIndex();
if(change_index){
    iIndices[0] = 0;
    iIndices[1] = 1;
    iIndices[2] = 2;

    iIndices[3] = 2;
    iIndices[4] = 3;
    iIndices[5] = 0;

    change_index = false;
}else{
    iIndices[0] = 4;
    iIndices[1] = 5;
    iIndices[2] = 6;

    iIndices[3] = 6;
    iIndices[4] = 7;
    iIndices[5] = 4;
    change_index = true;
}
cube.geometry.index.needsUpdate = true;

cube.geometry.setDrawRange( 0, 6 );

这是渲染结果。

enter image description here

只能保留第一个分配的索引。例如,indices([0,1,2,2,3,0])是有效的。当我下次设置新值时,索引([4,5,6,6,7,4])无效。

我搜索了一些问题。例如,cube.geometry.index.needsUpdate = true;无效。其他,geometry.addAttribute('indices', new THREE.BufferAttribute(new Float32Array(iIndices), 3));和更新cube.geometry.attributes.indices.array;。它无效。

如何在循环函数中更新bufferGeometry的这些索引?

当我尝试一些方法来解决它时,我发现一个有一个新问题的低方法。如何优化它。

这是我的方法。

var iIndices = cube.geometry.index.array.subarray(0, 6);
if(change_index){
    iIndices[0] = 0;
    iIndices[1] = 1;
    iIndices[2] = 2;

    iIndices[3] = 6;
    iIndices[4] = 7;
    iIndices[5] = 4;

    change_index = false;
}else{
    iIndices[0] = 4;
    iIndices[1] = 5;
    iIndices[2] = 6;

    iIndices[3] = 2;
    iIndices[4] = 3;
    iIndices[5] = 0;
    change_index = true;
}
cube.geometry.index.needsUpdate = true;

这是结果(之前)。

result01

这是结果(之后)。

result02

几何体的顶点是不变的,但几何体的索引( result01 )是[0,1,2,2,3,0]和几何体的索引( result02 < / strong>)是[4,5,6,6,7,4]。渲染几何体时,索引会在result01和result02之间的每一帧更新。

但是,该方法仅支持new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({wireframe: false}));。当wireframe=true时,几何索引无法更新。

如何wireframe=true

进行优化

0 个答案:

没有答案