Three.js 此手柄形状需要三个方向的指导

我必须在三个JS中创建此手柄形状：

我把它想象成一个平面几何体和两端扭曲/挤压的圆锥体的组合，z位置比物体的其余部分小

我认为只创建一个形状比尝试将网格合并在一起更简单。以下是我目前掌握的情况：

（函数onLoad（）{
var容器、摄影机、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
初始化场景（）；
addGridHelper（）；
添加摄像头（）；
addRenderer（）；
addOrbitControls（）；
var knottedRibbonHandleTwo=createKnottedRibbonHandleTwo（）；
knottedRibbonHandleTwo.位置x-=250；
场景.添加（knottedRibbonHandleTwo）；
var sceneLight=新的三个半球光（0xffffbb，0x080820，1）；
场景。添加（场景灯光）；
}
函数createKnottedRibbonHandleTwo（）{
var皮带=新的三个形状（）；
传送带。移动到（0，0）；
传送带。lineTo（25,0）；
传送带。lineTo（25，2.5）；
传送带。lineTo（0,2.5）；
变量挤出设置={
步骤：1，
金额：1，
bevelEnabled:错，
体重：1，
贝弗西：1，
斜面部分：1
};
var geometry=新的三种挤出计量法（皮带、挤出设置）；
var材质=新的3.0网格材质({
颜色：0xffd700，
线框：错误
});
var mesh=新的三个网格（几何体、材质）；
网格。比例。多重刻度（20）；
回流网；
}
/****基本场景设置****/
函数initScene（）{
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xffffff）；
}
函数addCamera（）{
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（349.1133407046066405.44010726325604359.311112889029）；
场景。添加（摄影机）；
}
函数addGridHelper（）{
var planeGeometry=新的三个平面几何体（2000,2000）；
平面几何.rotateX（-Math.PI/2）；
var planeMaterial=新的三点阴影材质({
不透明度：0.2
});
var plane=新的三个网格（平面几何体、平面材质）；
平面位置y=-200；
plane.receiveShadow=true；
场景。添加（平面）；
var helper=new THREE.GridHelper（2000100）；
//helper.position.y=-199；
helper.material.opacity=0.25；
helper.material.transparent=true；
场景.添加（助手）；
var axis=新的三个.AxesHelper（）；
场景。添加（轴）；
}
函数addRenderer（）{
renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
container.appendChild（renderer.domeElement）；
}
函数addOrbitControls（）{
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}
})();
正文{
背景：透明；
填充：0；
保证金：0；
字体系列：无衬线；
}
#帆布{
利润率：10px自动；
宽度：800px；
高度：350px；
边缘顶部：-44px；
}
创造力取决于你。你可以创建你想要的。我只是稍微修改了一下您的代码片段：


（函数onLoad（）{
var容器、摄影机、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
初始化场景（）；
addGridHelper（）；
添加摄像头（）；
addRenderer（）；
addOrbitControls（）；
var knottedRibbonHandleTwo=createKnottedRibbonHandleTwo（）；
knottedRibbonHandleTwo.位置x-=250；
场景.添加（knottedRibbonHandleTwo）；
var sceneLight=新的三个半球光（0xffffbb，0x080820，1）；
场景。添加（场景灯光）；
}
函数createKnottedRibbonHandleTwo（）{
var皮带=新的三个形状（）；
传送带移动到（0，1.25）；
传送带。lineTo（1.25,0.5）；
传送带。lineTo（2.5,0）；
传送带。lineTo（22.5,0）；
皮带。lineTo（23.75,0.5）；
传送带。lineTo（25，1.25）；
皮带。lineTo（23.75,2）；
传送带。lineTo（22.5,2.5）；
传送带。lineTo（2.5,2.5）；
传送带。lineTo（1.25,2）；
变量挤出设置={
步骤：1，
金额：.25，
bevelEnabled:错，
体重：1，
贝弗西：1，
斜面部分：1
};
var geometry=新的三种挤出计量法（皮带、挤出设置）；
var材质=新的3.0网格材质({
颜色：0xffd700，
线框：错误
});
var mesh=新的三个网格（几何体、材质）；
目数刻度设置刻度（20）；
回流网；
}
/****基本场景设置****/
函数initScene（）{
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xffffff）；
}
函数addCamera（）{
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（349.1133407046066405.44010726325604359.311112889029）；
场景。添加（摄影机）；
}
函数addGridHelper（）{
var planeGeometry=新的三个平面几何体（2000,2000）；
平面几何.rotateX（-Math.PI/2）；
var planeMaterial=新的三点阴影材质({
不透明度：0.2
});
var plane=新的三个网格（平面几何体、平面材质）；
平面位置y=-200；
plane.receiveShadow=true；
场景。添加（平面）；
var helper=new THREE.GridHelper（2000100）；
//helper.position.y=-199；
helper.material.opacity=0.25；
helper.material.transparent=true；
场景.添加（助手）；
var axis=新的三个.AxesHelper（）；
场景。添加（轴）；
}
函数addRenderer（）{
renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
container.appendChild（renderer.domeElement）；
}
函数addOrb