Javascript 三种材质网格的中间拉伸

我目前正在创建一个三js应用程序，我只是想问一下这是否可行。因此，我的目标是在搅拌器中创建一个模型，它类似于下面的图像中的Mesh 1，通过KrONSOGROM将其导出到搅拌器GLTF出口商，导入到三个JS中，并在中间挤压网格，以在下面的图像中实现网格×2。 这样做的原因是我需要显示一个模型，可以有一个动态的长度，让用户通过应用程序的UI控制模型的长度

这可能吗？如果没有，我有没有办法实现我需要完成的行为

---

将模型缩小到一个单位bbox，并使用自定义顶点着色器，该着色器根据顶点的模型空间位置操纵顶点

const vs=`
均匀浮动uWidthModifier；
void main（）
{
vec3 p=位置；
如果（p.x>0.33）{
p、 x+=0.5*uWidthModifier；
}否则如果（p.x<-0.33）{
p、 x-=0.5*uWidthModifier；
}
vec4 modelViewPosition=modelViewMatrix*vec4（p，1.0）；
gl_位置=投影矩阵*模型视图位置；
}
`;
常数fs=`
void main（）{
gl_FragColor=vec4（1.0,0.0,0.0,1.0）；
}
`;
让场景=新的三个。场景（）；
让摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
让renderer=new THREE.WebGLRenderer（）；
让几何体=新的3.BoxGeometry（2,2,2,4,1,1）；
让材质=新的3.ShaderMaterial({
制服：{
uWidthModifier:{value:0}
},
碎片着色器：fs，
顶点着色器：vs，
线框：正确
});
让立方体=新的三个网格（几何体、材质）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
场景.添加（立方体）；
摄像机位置z=5；
document.getElementById（'inc'）。addEventListener（'click'，function（）{
material.uniforms.uWidthModifier.value+=0.5；
});
document.getElementById（'dec'）。addEventListener（'click'，function（）{
material.uniforms.uWidthModifier.value-=0.5；
});
函数animate（）{
请求动画帧（动画）；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
}
制作动画（）
#配置{
颜色：白色；
位置：绝对位置；
z指数：1；
}

uWidthModifier：
+
-
使用/？怎么样？导入对象中的网格似乎是一个缓冲几何体。如何使用这些网格数据来利用挤出计量学/挤出缓冲几何中的功能？我的意思是直接在场景中使用这些几何，而不是使用Blender中的模型。你能把这个问题贴在网上吗？使用您的模型创建一个实时代码示例（JSFIDLE、codepen等）。我无法为此创建FIDLE，因为我需要托管gltf文件才能将其加载到应用程序中，而我没有任何地方可以托管它。我还想使用blender，因为模型不会像上面图像上的示例网格那样简单，这意味着通过编程创建网格太困难了，我使用github来实现这一目的。在JSFIDLE或codepen上使用这些文件很容易。如果能提供一个带有此解决方案的实时代码示例，那就太好了。很好的示例：）同样的方法也可以应用在javascript端，修改顶点本身。谢谢@prisoner849，我不确定这里是否有链接现有JSFIDLE片段的方法，但我尝试将我的代码复制/粘贴到此处的实时代码片段：）