LineConnectors 2

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div style="position: absolute;" id="mark"></div>

CSS

body {
  overflow: hidden;
  margin: 0;
}

#mark {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: red;
}

JavaScript

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("mousemove", onMouseMove);

var mouse = new THREE.Vector2();

function onMouseMove(event) {
  document.getElementById("mark").style.left = (event.clientX - 12) + "px";
  document.getElementById("mark").style.top = (event.clientY - 12) + "px";
  
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

var controls = new THREE.OrbitControls(camera);

scene.add(new THREE.GridHelper(10, 20));

var objects = [];
for (var i = 0; i < 5; i++) {
  var geom = new THREE.BoxGeometry(1, 1, 1);
  var obj = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
    color: Math.random() * 0xffffff
  }));
  obj.userData = {
    position: {
      x: Math.random() * 20 - 10,
      y: Math.random() * 20 - 10,
      z: Math.random() * 20 - 10
    },
    amplitude: {
      x: Math.random() * 5,
      y: Math.random() * 5,
      z: Math.random() * 5
    },
    initVal: Math.random() * Math.PI,
    speed: Math.random() * 2
  };
  console.log(obj.userData);
  objects.push(obj);
  scene.add(obj);
}

var dummyObject = new THREE.Group();
scene.add(dummyObject);

var lines = [];
for (var j = 0; j < objects.length - 1; j++) {
  makeLine(objects[j], objects[j + 1], "yellow", true);
}

makeLine(objects[0], dummyObject, "red", false);


function makeLine(obj1, obj2, color, depthTest) {
  var lineGeom = new THREE.Geometry();
  lineGeom.vertices.push(obj1.position);
  lineGeom.vertices.push(obj2.position);
  var line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({
    color: color
  }));
  line.material.depthTest = depthTest;
  lines.push(line);
  scene.add(line);
}

var clock = new...