Question

我想避免创建新的类型数组和随后的gc（）。我使用BufferedGeometry制作了几何体。收到事件后，我的顶点和faces索引会更新。我可以通过设置verticesNeedUpdate更新坐标，但不会更新面。更新被称为每秒20-50次，这在浏览器上可能很重。如何通过避免为JavaScript垃圾收集器创建大量垃圾来实现此目的？（参见下面的方法update()）。

function WGeometry77(verts, faces) {
    THREE.Geometry.call( this );
    this.type = 'WGeometry77';
    this.parameters = {};
    // Initially create the mesh the easy way, by copying from a BufferGeometry
    this.fromBufferGeometry( new MyBufferGeometry77( verts, faces ) ); 
};

WGeometry77.prototype = Object.create( THREE.Geometry.prototype );
WGeometry77.prototype.constructor = WGeometry77;

WGeometry77.prototype.update = function(verts, faces) {
    var geom = this;
    var nl = Math.min(geom.vertices.length, verts.length/3);
    for ( var vi = 0; vi < nl; vi ++ ) {
        geom.vertices[ vi ].x = verts[vi*3+0];
        geom.vertices[ vi ].y = verts[vi*3+1];
        geom.vertices[ vi ].z = verts[vi*3+2];
    }
    var nf = Math.min(geom.faces.length, faces.length/3);
    for ( var fi = 0; fi < nf; fi ++ ) {
        geom.faces[ fi ].a = faces[fi*3+0];
        geom.faces[ fi ].b = faces[fi*3+1];
        geom.faces[ fi ].c = faces[fi*3+2];
    }
    geom.verticesNeedUpdate = true;  // Does not update the geom.faces
}

PS。我的代码是用Emscripten编写的，它做了类似的事情：

var verts = Module.HEAPF32.subarray(verts_address/_FLOAT_SIZE, verts_address/_FLOAT_SIZE + 3*nverts);

我想做的几乎是动画或动态几何（使用Marching Cubes计算）。但我的拓扑（网格图）也会更新。我应该使用哪种ThreeJS课程？如果没有这样的类，我应该创建一个新的类，如UpdatableBufferedGeometry？

Answer 1

如果您想提高效率，则应创建<script id="chat-window-template" type="text/x-handlebars-template"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill"> <a href="#" class="close"><i class="fa fa-times"></i></a> <a href="#"> <span class="pull-left"> <img src="{{ user_image }}" width="40"> </span> <span class="contact-name">{{user}}</span> </a> </div> <div class="panel-body" id="chat-bill"> </div> <form id="messageForm"> <input id="nameInput" type="hidden" class="input-medium" value="Macbook" /> <input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" /> </form> </div> </script>而不是BufferGeometry。

您可以使用此示例的源代码作为参考： http://threejs.org/examples/#webgl_buffergeometry_uint

Answer 2

要在呈现后更新geometry.attributes.position.setXYZ( index, x, y, z ); geometry.attributes.position.needsUpdate = true;，您可以使用此模式：

BufferGeometry

对于已编入索引的index，您可以像这样更改geometry.index.array[ index ] = value; geometry.index.needsUpdate = true;数组：

geometry.setDrawRange( 0, numVertices );

您无法调整缓冲区大小 - 只能更改其内容。您可以预先分配更大的数组并使用

'name' => array(
    'type' => 'Zend\Mvc\Router\Http\Segment',
    'options' => array(
        'route'    => '/site/:id/orders[/:page]',
        'constraints' => array(
            'id' => '[0-9]*',
            'page'    => '[0-9]*'
        ),
        'defaults' => array(
            'controller' => 'Application\Controller\Site',
            'action'     => 'action'
        ),
    ),
),

three.js r.78

如何在ThreeJS中有效地更新几何体的拓扑结构？

2 个答案: