三个js如何手动给BufferGeometry添加三角形答案

【问题标题】：Three js how to add triangle to BufferGeometry manually三个js如何手动给BufferGeometry添加三角形
【发布时间】：2017-06-11 03:52:06
【问题描述】：

我一直在尝试找到使用three.js 更改网格顶点的最快方法。我发现如果我更改mesh.geometry.attributes.position.array 的一部分，然后设置mesh.geometry.attributes.position.needsUpdate=true，它工作得很好，不需要重建数组或重新创建opengl 缓冲区。我发现 needsUpdate=true 改变了属性的版本号，这使得它重新发送属性顶点数组到 opengl 缓冲区。

所以我尝试自己这样做，而是先调用 gl.bindBuffer()，然后调用 gl.bufferData()，但在每次循环执行一段时间后，它在我调用 new Float32Array() 时崩溃。这很奇怪，因为当我检查我的内存使用情况时，我在崩溃之前只使用了 4MB。我意识到这不是在每个循环中重新分配/重新分配数组的最佳方法，只是当我可以在数组满时将其大小增加一倍时使其稍微变大，但我想了解为什么这样做时它会崩溃。

https://jsfiddle.net/q1txL19c/3/ 20 秒后崩溃。但是，如果我将 if(0) 更改为 if(1) 就可以了。

three.js 有何不同之处使其不会崩溃？根据分析器，当没有多少 javascript 内存用完时，为什么 new Float32Array() 会失败？

<!doctype html>
<html>
   <body style='margin:0;padding:0'>
        <script src="https://threejs.org/build/three.js"></script>
        <script>

var camera, scene, renderer, mesh
var triangles = 1
init()

function init()
{
    scene = new THREE.Scene()

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, .1, 10000)
    camera.position.z = 15
    scene.add(camera)

    var geometry = new THREE.BufferGeometry()

    var material = new THREE.MeshBasicMaterial( {side: THREE.FrontSide, transparent:false, vertexColors: THREE.VertexColors} )
    mesh = new THREE.Mesh(geometry, material)

    var positions = new Float32Array([1,1,0, 0,1,0, 0,0,0])
    geometry.addAttribute('position', new THREE.BufferAttribute(positions,3))

    var colors = new Float32Array([0,0,1, 0,0,0, 0,0,0])
    geometry.addAttribute('color', new THREE.BufferAttribute(colors,3))

    scene.add(mesh)

    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setClearColor( 0x6699DD )

    document.body.appendChild(renderer.domElement)

    loop()
}

function addTriangle(geometry)
{
    // Make 3 new vertices, each with x,y,z. 9 total positions.
    var newVertices = []
    for(var i=0; i<9; i++)
        newVertices[i] = Math.random()*10-5

    appendArrayToAttribute(geometry.attributes.position, newVertices)


    // Make 3 new colors, 1 for each new vertex, each with r,g,b. 9 total slots.
    var newColors = []
    for(var i=0; i<9; i++)
        newColors[i] = Math.random()

    appendArrayToAttribute(geometry.attributes.color, newColors)
}

function appendArrayToAttribute(attribute, arrayToAppend)
{
    // Make a new array for the geometry to fit the 9 extra positions at the end, since you can't resize Float32Array
    try
    {
        var newArray = new Float32Array(attribute.array.length + arrayToAppend.length)
    }
    catch(e)
    {
        console.log(e)
        if(!window.alerted)
        {
            alert("out of memory!? can't allocate array size="+(attribute.array.length + arrayToAppend.length))
            window.alerted = true
        }
        return false
    }
    newArray.set(attribute.array)
    newArray.set(arrayToAppend, attribute.array.length)


    attribute.setArray(newArray)

    if(0)
    {
        attribute.needsUpdate = true
    }
    else
    {
        // Have the geometry use the new array and send it to opengl.
        var gl = renderer.context
        gl.bindBuffer(gl.ARRAY_BUFFER, renderer.properties.get(attribute).__webglBuffer)
        gl.bufferData(gl.ARRAY_BUFFER, attribute.array, gl.STATIC_DRAW)
    }

}

function loop()
{
    requestAnimationFrame(loop)

    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.02

    renderer.render(scene, camera)

    for(var i=0;i<10;i++)
    {
        addTriangle(mesh.geometry)
        triangles++
    }
    if(Math.random()<.03)
    {
        console.log("triangles="+triangles)
        var gl = renderer.context
        console.log("gl buffer size="+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE))
    }
}

      </script>

   </body>
</html>

【问题讨论】：

标签： javascript three.js typed-arrays

【解决方案1】：

您可以在第一次渲染后将面添加到BufferGeometry，但您必须预先分配几何体attribute 缓冲区以使其足够大，因为它们无法调整大小。

此外，您将更新数组值，而不是实例化新数组。

您可以像这样更新要渲染的面数：

geometry.setDrawRange( 0, 3 * numFacesToDraw ); // 3 vertices for each face

见this related answer and demo。

three.js r.84

【讨论】：