时间戳

首页 > 解决方案 > Three.js 从 boxGeometry 更新网格的位置属性

javascript - Three.js 从 boxGeometry 更新网格的位置属性

问题描述

我正在实现一个界面，通过单击+拖动它的面来调整立方体的大小。

我想通过更新缓冲区几何对象的位置属性来实现这一点，或者重新创建网格，或者只是设置 needsUpdate 标志并让它自行更新。这些选项都不适合我。我的最新尝试如下。

  this.boxGeo = new THREE.BoxGeometry(2,2,2)
  this.boxMesh = new THREE.Mesh(this.boxGeo, this.boxMaterial)

...

  // let disp = the amount we want to move the face

  // vertex indices
  let indices = this.planes[index].indices

  // new typed array for position attribute
  let positions = new Float32Array(8 * 3)

  // for each of the 8 verts
  for (let i=0; i < 8; i++) {
    if(!indices.includes(i) || disp === 0) {
      positions[i * 3]     = this.boxGeo.vertices[i].x
      positions[i * 3 + 1] = this.boxGeo.vertices[i].y
      positions[i * 3 + 2] = this.boxGeo.vertices[i].z
    } else {
      // modify verts
      let d = new THREE.Vector3(disp, disp, disp).multiply(plane.normal)
      positions[i * 3]     = this.boxGeo.vertices[i].x + d.x
      positions[i * 3 + 1] = this.boxGeo.vertices[i].y + d.y
      positions[i * 3 + 2] = this.boxGeo.vertices[i].z + d.z
    } 
  }
  // update geometry
  this.boxMesh.geometry._bufferGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))

我尝试了其他一些方法，包括更密切地关注此处的文档： https ://threejs.org/docs/#manual/en/introduction/How-to-update-things

任何帮助或建议将不胜感激！

编辑：根据下面的评论，我正在仔细查看我的 ...attribute.position.array 并注意到它看起来每个面都列出了它的所有顶点，所以我不能像上面那样访问它们（或设置它们）。关于我应该阅读的文档的任何建议？有没有更简单的方法来做到这一点？

因此，根据@Murgen87 的评论，下面的代码可用于更新位置属性。看起来 BoxGeometry 原语虽然不使用索引面，但现在我认为缩放/平移框可能更容易。

let positions = 
      this.boxMesh.geometry._bufferGeometry.getAttribute('position')

 // this loop doesn't pick the right positions for my use case 
 faces.map((f, i) => {
    positions.array[f * 6 + i * 3]     += displacement.x
    positions.array[f * 6 + i * 3 + 1] += displacement.y
    positions.array[f * 6 + i * 3 + 1] += displacement.z
  })

  positions.needsUpdate = true;

我剩下的最后一个问题是为什么我不能这样做：

box.geometry.vertices.multiply(displacement)
box.geometry.verticesNeedsUpdate = true

......这只是让我回答我自己的问题！

标签： javascriptthree.jsmesh

解决方案

最简单的方法是：

  this.boxMesh.geometry.vertices.map((v,i) => {
    if(!planeObj.indices.includes(i)) return
    this.boxMesh.geometry.vertices[i].add(displacement)
  })
  this.boxMesh.geometry.verticesNeedUpdate = true

更新位置属性的有效模式是：

  let positions = 
      this.boxMesh.geometry._bufferGeometry.getAttribute('position')
  planeObj.faces.map((f, i) => {
    positions.array[f * 6 + i * 3]     += displacement.x
    positions.array[f * 6 + i * 3 + 1] += displacement.y
    positions.array[f * 6 + i * 3 + 1] += displacement.z
  })
  positions.needsUpdate = true

请注意，上面的循环不会在 position.array 中选择正确的元素，如果只是显示如何更新，如果这是您需要做的。

谢谢！

推荐阅读