<p dir="auto">Hello guys, im facing a problem which im not sure if it<code class="notranslate">s a Bug on THREE.js or it</code>s really how Points works.. consider the following code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var maxPoints = 10;
var group = new THREE.Group();

for (var i = 0; i &lt; maxPoints; i++) {

  var x = Math.random();
  var y = Math.random();
  var z = Math.random();

  var geometry: new THREE.BufferGeometry(),
  var vertices: new Float32Array(maxPoints * 3),

  vertices[i * 3 + 0] = x;
  vertices[i * 3 + 1] = y;
  vertices[i * 3 + 2] = z;

  var attribute = new THREE.BufferAttribute(vertices, 3).setDynamic(true);
  geometry.addAttribute('position', attribute);

  geometry.setDrawRange(i, 1); 
// i only want to display one point if i dont set this i end up with 2 points, 
// 1 at a random position and one at the center (0,0,0) for all objects in the group

  group.add(new THREE.Points(geometry));

}

...
scene.add(group);
"><pre class="notranslate"><code class="notranslate">var maxPoints = 10;
var group = new THREE.Group();

for (var i = 0; i &lt; maxPoints; i++) {

  var x = Math.random();
  var y = Math.random();
  var z = Math.random();

  var geometry: new THREE.BufferGeometry(),
  var vertices: new Float32Array(maxPoints * 3),

  vertices[i * 3 + 0] = x;
  vertices[i * 3 + 1] = y;
  vertices[i * 3 + 2] = z;

  var attribute = new THREE.BufferAttribute(vertices, 3).setDynamic(true);
  geometry.addAttribute('position', attribute);

  geometry.setDrawRange(i, 1); 
// i only want to display one point if i dont set this i end up with 2 points, 
// 1 at a random position and one at the center (0,0,0) for all objects in the group

  group.add(new THREE.Points(geometry));

}

...
scene.add(group);

</code></pre></div>
<p dir="auto">The Problem im facing is that by creating a Point using BufferGeometry i always end up with 2 points, one always at the center and another randomly positioned. so if i am to create 1000 points i end up with 2000, been 2000 centered at the coordinates (0,0,0). It`s not 2000 Instance of Points but 1000 instance with 2 dots each, which i dont know how to make it only draw one,</p>
<p dir="auto">i temporarily fixed it by setting drawRange, but i surely think it`s not the right way, as i end up with a array with lots and lots of 0 values for the bufferposition for each point..</p>
<p dir="auto">Not sure if this is a bug, but the triangulation fails, although shape is simple. See the images, code and description of the problem:</p>
<p dir="auto"><a href="http://stackoverflow.com/questions/16241854/holes-in-polygons-causes-triangulation-failure-in-three-js" rel="nofollow">http://stackoverflow.com/questions/16241854/holes-in-polygons-causes-triangulation-failure-in-three-js</a></p>
<p dir="auto">Without holes works.</p>
<p dir="auto">Every combination of orientation has no effect.</p>
<hr>
<p dir="auto">UPDATE: I checked the Three.js code and there is a link to <a href="http://www.sakri.net/blog/2009/06/12/an-approach-to-triangulating-polygons-with-holes/" rel="nofollow">http://www.sakri.net/blog/2009/06/12/an-approach-to-triangulating-polygons-with-holes/</a>, which says that 90% of times it works.</p>
<p dir="auto">If that method is used for triangulation in Three.js, 90% propability is not acceptable in production environments.</p>