Threejs - 2d collision version 2

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>
<!-- this is a dot product collision, really fast for any shape but there is no info on collision contact since it is not edge to edge or point to point -->

CSS

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

JavaScript

var scene, renderer, camera;
var controls;

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var objectIntersection;
var dragging = false;
var offset = new THREE.Vector3();
var meshes = [];

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

window.addEventListener("mousemove", onMouseMove, false);
window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);

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();

  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);

  var viewSize = width / 5;
  var aspectRatio = width / height;

  var viewport = {
    viewSize: viewSize,
    aspectRatio: aspectRatio,
    left: (-aspectRatio * viewSize) / 2,
    right: (aspectRatio * viewSize) / 2,
    top: viewSize / 2,
    bottom: -viewSize / 2,
    near: -100,
    far: 100
  }

  camera = new THREE.OrthographicCamera(
    viewport.left,
    viewport.right,
    viewport.top,
    viewport.bottom,
    viewport.near,
    viewport.far
  );

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

  lightSetup();

  var points = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(10, 0, 0), new THREE.Vector3(10, 10, 0), new THREE.Vector3(0, 10, 0)];

	let positionX = 0;
  
  for(let i = 0; i < 100; i++) {
  	createCircle(new THREE.Vector3(positionX));
    
    positionX += 20;
  }
}

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...