【问题标题】:How to update the Geometry vertex position Objloader如何更新几何顶点位置 Objloader
【发布时间】:2015-10-29 20:11:25
【问题描述】:

我正在使用 objloader 加载多个对象。我正在尝试移动其中一个对象并需要更新顶点位置。在加载对象时,我将缓冲几何转换为几何并运行一些函数。我检查了一些样本,它们都更新了缓冲几何的顶点。我是否需要将其转换回缓冲几何? 我需要在移动计算其他函数时获得实时位置,所以我不想继续从缓冲区转换为几何体,反之亦然。

这是一段代码:

          var tool= new THREE.OBJLoader();
          tool.load( '../obj/tool.obj', function ( object ) {
          var material = new THREE.MeshLambertMaterial({color:0xA0A0A0});             
          object.traverse( function ( child ) {
          if ( child instanceof THREE.Mesh ) {
               child.material = material;
               Geometry = new THREE.Geometry().fromBufferGeometry(child.geometry);
              }

          console.log(Geometry.vertices[220]);
          Geometry.position.x += 0.01;
          Geometry.verticesNeedUpdate = true;
          console.log(Geometry.vertices[220]);

另外,我查看了最新版本的迁移文档并签出了。

【问题讨论】:

    标签: three.js geometry updates vertices


    【解决方案1】:

    OBJLoader 返回BufferGeometry。您可以像这样更新顶点位置:

    geometry.attributes.position.setX( index, x );
    
    geometry.attributes.position.setXYZ( index, x, y, z ); // alternate
    
    geometry.attributes.position.needsUpdate = true; // only required if geometry previously-rendered
    

    学习http://threejs.org/docs/#Reference/Core/BufferAttribute


    相反,您可以转换为Geometry。在您的情况下,请在加载程序回调中执行以下操作:

    child.geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
    

    然后您使用此模式更新顶点位置:

    geometry.vertices[ 0 ].set( x, y, z );
    geometry.verticesNeedUpdate = true;
    

    仅当几何体先前已渲染时才设置needsUpdate 标志。

    three.js r.71

    【讨论】:

    • 嗯,感谢您的回复,但问题是我首先从缓冲几何转换为几何以访问顶点和其他属性,渲染了对象,我想通过鼠标移动来移动它获取对象的实时顶点位置。这样我就需要 needUpdate 。所以我不知道在“函数渲染()”中渲染时如何更新位置。
    • 1.我回答了您在帖子中提出的问题。 2. 我在回答中解释了如何在加载器回调中正确替换子几何。 3. 如果您还有其他问题——例如如何更新渲染循环中的位置——请发新帖。
    • This post 展示了如何在渲染循环中更新BufferGeometry
    • 感谢您的帮助。问题的主题甚至是几何顶点位置更新。如前所述,我将缓冲几何转换为几何以访问顶点以及渲染和移动对象,我需要更新几何顶点位置,并且我需要知道如何更新位置。示例和您之前的回复基于缓冲几何。再次感谢。
    • 感谢您的更新,但仍然无法正常工作,您能否解释一下这段代码的具体作用?几何.vertices[0].set(x,y,z);
    猜你喜欢
    • 2013-04-11
    • 1970-01-01
    • 1970-01-01
    • 2014-04-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-16
    相关资源
    最近更新 更多