Можно ли анимировать вершины без использования морфов или шейдеров?

Question

Я новичок в THREE.js и задаюсь вопросом о том, как манипулировать конкретным примером, который mr.doob разместил на сайте. В примере, масштаб и положение у поля 2500 частиц в анимации смещения синхронизации, частицах частицы в цикле в цикле с помощью Math.sin() здесь

http://threejs.org/examples/#canvas_particles_waves

Не зная много о THREE.js, я видел это и хотел применить эту анимацию к сетке 2500 плоскостей лица, чтобы имитировать волнообразный океан. Можно и штраф для создания сетки, как это: (Setx в настоящее время возвращается, как не определено):

var planeMaterial = new THREE.MeshBasicMaterial({transparent: true, opacity: 0.5, wireframe:true}); 
      plane.rotation.x = Math.PI/2; 
      scene.add(plane); 

      var planeGeometry = new THREE.PlaneGeometry(5000, 5000, AMOUNTX, AMOUNTY); 
      var i = 0; 
      for (var ix = 0; ix < AMOUNTX; ix ++) { 

       for (var iy = 0; iy < AMOUNTY; iy ++) { 
        var vertice = planeGeometry.vertices[i]; 
        vertice.position.setX = ix * SEPARATION - ((AMOUNTX * SEPARATION)/2); 
        vertice.position.setZz = iy * SEPARATION - ((AMOUNTX * SEPARATION)/2); 
        plane.verticesNeedUpdate = true; 
       } 
      } 
      var planeMaterial = new THREE.MeshBasicMaterial({transparent: true, opacity: 0.5, wireframe:true}); 
      plane.rotation.x = Math.PI/2; 
      scene.add(plane); 

, затем анимировать его в функции визуализации(), как это:

var vertices = []; 
     for (var ix = 0; ix < AMOUNTX; ix ++) { 

       for (var iy = 0; iy < AMOUNTY; iy ++) { 
        var vertice = planeGeometry.vertices[i]; 
        vertice = vertices[ i++ ]; 
        vertice.position.y = (Math.sin((ix + count) * 0.3) * 50) + 
         (Math.sin((iy + count) * 0.5) * 50); 
       } 

      } 

? Или мне пришлось бы на самом деле делать морфовые фигуры, или делать это, используя причудливый шейдерный шейдер? Я хочу сделать это таким образом, чтобы сохранить спокойное движение волн.

Answer 1

Вам просто нужно установить флаг needsUpdate.

geometry.verticesNeedUpdate = true; 

This example показывает, как это сделать.