I instantiate one PlaneGeometry, then I instantiate 200 meshes sharing this geometry and with their own instance of a given shaderMaterial. Here is a simplified version of the code :

var geom = new THREE.PlaneGeometry(10,10,2,2);
var meshes = [];
var material=null;

for (var i=0 ; i<200 ; i++)
   var elevations = getElevations(i); //return an array of 9 values, values are different for each mesh
   var mat = new THREE.ShaderMaterial({
               vertexShader : vsAlti, //process displacement on y coordinate of the vertex
               fragmentShader : fsAlti,
               attributes : { elevation :  { type : 'f',value : elevations }}
   meshes.push(new THREE.Mesh(geometry , mat));

Although the array value of the elevation attributes is different for each mesh, only one is applied for all of them. It looks like only one instance of shaderMaterial is applied to all the meshes. I would rather expect that for each mesh the shader with the matching attribute elevation values would be applied.

Here is the jsFiddle illustrating the problem : http://jsfiddle.net/McNulty/L584j/119/

  • \$\begingroup\$ Its a know bug. Try using the DEV branch of Node.j iirc its fixed there. \$\endgroup\$ Sep 12, 2014 at 21:16
  • \$\begingroup\$ Oops not nodejs I meant threejs \$\endgroup\$ Sep 12, 2014 at 22:33

1 Answer 1


You need to clone() the geometry before you use it.

Here is a fiddle with the solution http://jsfiddle.net/ekwk2nxf/


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .