Javascript 设置直线上两点之间的直线颜色

我在three.js中基于顶点数组绘制了一条线，并希望将线的颜色设置为沿着线的两个点之间的特定值，这两个点不是顶点。 这两个点是距离直线原点特定距离的点，例如，我希望沿500个单位的直线在50到100个单位的距离之间更改颜色。我怎样才能做到这一点

使用

VertexColor:THREE.VertexColor

，我只能指定线条顶点之间的颜色。我想我需要将这两个点作为额外的顶点传递，但是我怎样才能得到沿直线的XYZ坐标的位置呢

---

谢谢你的提示，如何完成这一点

一个选项是使用

.onBeforeCompile（）

修改

THREE.LineDashedMaterial（）

：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0250500）；
摄像机。注视（场景。位置）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
添加（新的三个.GridHelper（500,10））；
var geom=new THREE.BufferGeometry（）.setFromPoints(
[
新的三矢量3（-250,0,0），
新三个矢量3（250，0，0）
]
);
var mat=新的3.LineDashedMaterial({
颜色：“红色”
});
变量={
分段开始：{
价值：50
},
段尾：{
数值：100
},
分段颜色：{
值：新的三种颜色（“黄色”）
}
}
mat.onBeforeCompile=着色器=>{
shader.uniforms.segmentStart=uniforms.segmentStart；
shader.uniforms.segmentEnd=uniforms.segmentEnd；
shader.uniforms.segmentColor=uniforms.segmentColor；
shader.fragmentShader=`
均匀浮动分段启动；
端部均匀浮动；
颜色均匀；
`+shader.fragmentShader；//添加制服
shader.fragmentShader=shader.fragmentShader.replace(
`if（mod（vLineDistance，totalSize）>dashSize）{
丢弃；
}`，//拆下仪表板的零件
``
);
shader.fragmentShader=shader.fragmentShader.replace(
`gl_FragColor=vec4（出射光，漫反射色.a）；`，
`gl_FragColor=vec4（向外发光，漫反射色.a）；
如果（VLINEDATION>=分段开始和VLINEDATION（&V）{
uniforms.segmentEnd.value=250+Math.sin（clock.getElapsedTime（））*150；
渲染器。渲染（场景、摄影机）
})；

正文{
溢出：隐藏；
保证金：0；
}

---

自定义着色器将有所帮助。例如，使用

.onBeforeCompile（）

可获得此结果。