如何在three.js中添加不同的顶点属性值实例？

Question

我正在学习three.js r86，我想要显示大量扭曲的球体。为了提高性能，我使用

创建了InstancedBufferGeometry个球体

var cubesGeometry = new THREE.InstancedBufferGeometry().copy(new THREE.SphereBufferGeometry(0.2, 7, 7));

并使用

成功定位了多个球体

    positions = ... // 3 random float values for each instance
    faPositions = new Float32Array(positions);
    cubesGeometry.addAttribute("pos",new THREE.InstancedBufferAttribute(faPositions,3,0));

使用以下顶点着色器：

  varying vec3 vNormal;
  attribute vec3 pos;
  attribute float displacement;

  void main() {
    vNormal = normalMatrix*normal;
    vec3 newPos = position + normal*vec3(displacement);

    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos+pos, 1.0);
  }

但是，该着色器还应提供随机顶点位移。虽然位置pos对于所有顶点都是相同的，但顶点之间的位移不同，因此我不能使用InstancedBufferAttribute，因为它会创建一个统一的球体。我如何分配属性值，以便每个顶点获得自己的值，而不是每个实例都相同？。