3 .js顶点位置不更新自定义着色器

我已经在three.js中创建了一个自定义着色器，允许我设置单个顶点的颜色，大小和位置。

颜色和大小工作良好，但当我更新顶点x,y或z时，它不会在屏幕上更新。

JSFiddle

我错过了什么?

顶点着色器:

<script type="x-shader/x-vertex" id="vertexshader">
  attribute float size;
  attribute vec3 color;
  varying vec3 vColor;
  varying vec2 vUv;
  void main() 
  {
    vColor = color;
    gl_PointSize = size;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
</script>

片段着色器

<script type="x-shader/x-fragment" id="fragmentshader">
  uniform sampler2D texture;
  varying vec2 vUv;
  varying vec3 vColor;
  void main() 
  {
    vec4 color = vec4(vColor, 1);
    gl_FragColor = color;
  }
</script>

JS:

var container = document.getElementById('container');
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
var scene = new THREE.Scene();
var vShader = document.getElementById('vertexshader').textContent;
var fShader = document.getElementById('fragmentshader').textContent;
var uniforms = {};
var attributes = {
  color: { type: 'c', value: [] },
  size:  { type: 'f', value: [] }
};
var geometry = new THREE.Geometry();
for ( var i = 0; i < 100; i ++ ) 
{
  var angle = Math.random() * Math.PI * 2;
  var radius = 40 + (Math.random() * 5);
  var vertex = new THREE.Vector3();
  vertex.x = Math.cos(angle) * radius;
  vertex.y = Math.sin(angle) * radius;
  vertex.z = 0; 
  attributes.size.value[i] = Math.random() * 10;
  attributes.color.value[i] = new THREE.Color( 0xff0000 );
  geometry.vertices.push( vertex );
}
var material = new THREE.ShaderMaterial(
{ 
  uniforms: uniforms,
  attributes: attributes,
  vertexShader: vShader,
  fragmentShader: fShader,
  transparent: true
});
var particleSystem = new THREE.PointCloud(geometry, material);
scene.add( particleSystem );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x292B30, 1 );
container.appendChild( renderer.domElement );
animate();
function animate() 
{
  requestAnimationFrame( animate );
  render();
}
function render() 
{
  for (var i = geometry.vertices.length - 1; i >= 0; i--) 
  {
    geometry.vertices[i].z = geometry.vertices[i].z - 0.5 ;
  }
  camera.lookAt( scene.position );
  //particleSystem.geometry.__dirtyVertices = true;
  renderer.render( scene, camera );
}