Threejs - instancedMesh points

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera;
var controls;

init();
lightSetup();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
   scene.rotation.x = -Math.PI / 2;
  
  var gridXZ = new THREE.GridHelper(1000, 100);
  scene.add(gridXZ);
  gridXZ.rotation.x = -Math.PI / 2;
 

  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  
  // sample code paste into console to get the vertices
  /* this.optionalMesh.geometry.vertices.forEach(p => {
     console.log('new THREE.Vector3(' + p.x + ',' + p.y + ',' + p.z + '),'); 
  }); */
  
  var points = [
  new THREE.Vector3()
  ];
 
 createSphereInstancedMesh('red', points2);
}

function animate() {
  controls.update();
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

function lightSetup() {
  if (scene) {
    var dirLight = new THREE.DirectionalLight();
    dirLight.position.set(3, 2, 1);
    dirLight.position.multiplyScalar(10);
    scene.add(dirLight);
  }

}

function createSphereInstancedMesh(color, points) {
  var geometry = new THREE.SphereGeometry(0.2, 10, 10);
  
  var material = new THREE.MeshBasicMaterial( { color: color } );
  
  var instancedMesh = new THREE.InstancedMesh(geometry, material, points.length);
  
  for(let i = 0; i < points.length; i++) {
  	instancedMesh.setMatrixAt(i, new THREE.Matrix4().makeTranslation(points[i].x, points[i].y, points[i].z));
  }
  
  scene.add(instancedMesh);
}

function createShape(points, color) {
	var shape = new THREE.Shape(points);
  var shapeGeometry = new THREE.ShapeGeometry(shape);
  
  var...