角度和平行点的线几何预测

Question

我正在用三个JS制作一支绘图笔，并且可以按照我想要的方式正常工作，但是我错过了一个功能，却不知道该怎么做。

当我第一次单击时，我要存储一个点，然后根据鼠标移动来更新线。 现在假设我向下移动鼠标并单击第二次，现在一行已经完成。 接下来，假设我从第二个点继续向上返回，并且当鼠标到达第一个点的相同高度时，我想显示辅助线。 所有方面都应该继续如此。例如，如果我的数组包含200个点，而我要绘制第201个点，则当鼠标移至相同高度或x或y平行位置时，它应该显示预测。

    我应该在代码中进行哪些更改。下面是样本小提琴的链接。

var renderer, scene, camera;
var line;
var count = 0;
var mouse = new THREE.Vector3();

init();
animate();

function init() {

  // info
  var info = document.createElement('div');
  info.style.position = 'absolute';
  info.style.top = '30px';
  info.style.width = '100%';
  info.style.textAlign = 'center';
  info.style.color = '#fff';
  info.style.fontWeight = 'bold';
  info.style.backgroundColor = 'transparent';
  info.style.zIndex = '1';
  info.style.fontFamily = 'Monospace';
  info.innerHTML = "three.js - animated line using BufferGeometry";
  document.body.appendChild(info);

  // renderer
  renderer = new THREE.WebGLRenderer();

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 0, 1000);

  // geometry
  var geometry = new THREE.BufferGeometry();
  var MAX_POINTS = 500;
  positions = new Float32Array(MAX_POINTS * 3);
  geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

  // material
  var material = new THREE.LineBasicMaterial({
    color: 0xff0000,
    linewidth: 2
  });

  // line
  line = new THREE.Line(geometry, material);
  scene.add(line);

  document.addEventListener("mousemove", onMouseMove, false);
  document.addEventListener('mousedown', onMouseDown, false);
}

// update line
function updateLine() {
  positions[count * 3 - 3] = mouse.x;
  positions[count * 3 - 2] = mouse.y;
  positions[count * 3 - 1] = mouse.z;
  line.geometry.attributes.position.needsUpdate = true;
}

// mouse move handler
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  mouse.z = 0;
  mouse.unproject(camera);
  if( count !== 0 ){
  	updateLine();
  }
}

// add point
function addPoint(event){
  console.log("point nr " + count + ": " + mouse.x + " " + mouse.y + " " + mouse.z);
  positions[count * 3 + 0] = mouse.x;
  positions[count * 3 + 1] = mouse.y;
  positions[count * 3 + 2] = mouse.z;
  count++;
  line.geometry.setDrawRange(0, count);
  updateLine();
}

// mouse down handler
function onMouseDown(evt) {
  // on first click add an extra point
  if( count === 0 ){
      addPoint();
  }
  addPoint();
}

// render
function render() {
  renderer.render(scene, camera);
}

// animate
function animate() {
  requestAnimationFrame(animate);
  render();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.js"></script>

Here's a fiddle