Javascript 角度和平行点的线几何体预测
我正在用三个JS制作一支画笔，它工作得很好，符合我想要的方式，但我错过了一个功能，不知道如何完成 当我第一次单击时，我正在存储一个点，然后根据鼠标移动更新线。 现在假设我向下移动鼠标并再次单击，现在一行完成了。 接下来，假设我从第二个点继续向上，我想在鼠标到达第一个点的相同高度时显示辅助线。 所有点也应如此。例如，如果我的数组包含大约200个点，并且我即将绘制第201个点，则当鼠标移动到相同高度或一些平行的x或y点位置时，它应该显示预测 我应该在代码中做哪些更改。下面是提琴样品的链接Javascript 角度和平行点的线几何体预测,javascript,three.js,geometry,line,point,Javascript,Three.js,Geometry,Line,Point,我正在用三个JS制作一支画笔，它工作得很好，符合我想要的方式，但我错过了一个功能，不知道如何完成 当我第一次单击时，我正在存储一个点，然后根据鼠标移动更新线。 现在假设我向下移动鼠标并再次单击，现在一行完成了。 接下来，假设我从第二个点继续向上，我想在鼠标到达第一个点的相同高度时显示辅助线。 所有点也应如此。例如，如果我的数组包含大约200个点，并且我即将绘制第201个点，则当鼠标移动到相同高度或一些平行的x或y点位置时，它应该显示预测 我应该在代码中做哪些更改。下面是提琴样品的链接 var
var渲染器、场景、摄影机；
var线；
var计数=0；
var mouse=new THREE.Vector3（）；
init（）；
制作动画（）；
函数init（）{
//信息
var info=document.createElement（'div'）；
info.style.position='绝对'；
info.style.top='30px'；
info.style.width='100%'；
info.style.textAlign='center'；
info.style.color='#fff'；
info.style.fontwweight='bold'；
info.style.backgroundColor='透明'；
info.style.zIndex='1'；
info.style.fontFamily='Monospace'；
info.innerHTML=“three.js-使用BufferGeometry的动画线条”；
document.body.appendChild（信息）；
//渲染器
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//场面
场景=新的三个。场景（）；
//摄像机
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,0,1000）；
//几何学
var geometry=new THREE.BufferGeometry（）；
var MAX_POINTS=500；
位置=新阵列（最大点数*3）；
geometry.addAttribute（'position'，新的三个.BufferAttribute（positions，3））；
//材料
var材料=新的三线基本材料({
颜色：0xff0000，
线宽：2
});
//线
直线=新的三条直线（几何、材料）；
场景。添加（行）；
document.addEventListener（“mousemove”，onMouseMove，false）；
document.addEventListener（'mousedown'，onMouseDown，false）；
}
//更新行
函数updateLine（）{
位置[计数*3-3]=鼠标.x；
位置[计数*3-2]=鼠标.y；
位置[计数*3-1]=鼠标.z；
line.geometry.attributes.position.needsUpdate=true；
}
//鼠标移动处理程序
mouseMove函数（事件）{
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
小鼠z=0；
鼠标。取消投影（相机）；
如果（计数！==0）{
updateLine（）；
}
}
//加点
函数添加点（事件）{
log（“点nr”+count+：“+mouse.x+”“+mouse.y+”“+mouse.z”）；
位置[计数*3+0]=鼠标.x；
位置[计数*3+1]=鼠标.y；
位置[计数*3+2]=鼠标.z；
计数++；
line.geometry.setDrawRange（0，计数）；
updateLine（）；
}
//鼠标按下处理程序
函数onMouseDown（evt）{
//第一次单击“添加额外点”
如果（计数==0）{
addPoint（）；
}
addPoint（）；
}
//渲染
函数render（）{
渲染器。渲染（场景、摄影机）；
}
//生动活泼
函数animate（）{
请求动画帧（动画）；
render（）；
}