Javascript Three.js快速文本雕刻

我正试图用Three.js在表面上雕刻一些文字。我已经用它实现了，而且它工作得很完美，结果真的很好，但问题是它需要很多时间。在我的电脑上，大约需要30秒来雕刻单词

Hello

搜索我在网站上找到的其他解决方案。他们制作定制珠宝，你可以在上面雕刻文字，雕刻文字所需的时间非常短！所以我假设他们没有使用csg.js。可以使用什么其他技术来实现此结果

---

关于使用凹凸贴图，我认为应该为每个字母生成凹凸贴图，但我不知道这是否正确。

我可以通过查看链接到的站点使用凹凸贴图的着色器来查看

我不认为您会为每个字母创建凹凸贴图，您只需要在单个画布上绘制所有图形（文本），并将其作为凹凸贴图应用

单击下面的“运行代码片段”以获得画布凹凸贴图的演示（在白色框中单击并拖动）。
我希望这有帮助

var摄影机、场景、渲染器、网格、材质、统计信息；
var drawStartPos={x:0，y:0}；
init（）；
设置画布绘制（）；
制作动画（）；
函数init（）{
//渲染器。
renderer=new THREE.WebGLRenderer（）；
//renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//将渲染器添加到页面
document.getElementById（'threejs-container'）.appendChild（renderer.doElement）；
//创建相机。
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=400；
//创建场景。
场景=新的三个。场景（）；
//创造材料
材质=新的三个。MeshPhongMaterial（）；
//创建立方体并添加到场景中。
var geometry=新的三个.BoxGeometry（200200200）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
//创建环境光并添加到场景中。
var light=新的三个。环境光（0x404040）；//柔和的白光
场景。添加（灯光）；
//创建平行光并添加到场景中。
var方向灯=新的三个方向灯（0xffffff）；
directionalLight.position.set（1,1,1）.normalize（）；
场景。添加（方向光）；
//添加用于调整窗口大小的侦听器。
addEventListener（'resize'，onWindowResize，false）；
//向页面添加统计信息。
统计数据=新统计数据（）；
document.body.appendChild（stats.dom）；
}
函数设置CanvasDrawing（）{
//获取画布和上下文
var drawingCanvas=document.getElementById（'drawing-canvas'）；
var drawingContext=drawingCanvas.getContext（'2d'）；
//绘制白色背景
drawingContext.fillStyle=“#FFFFFF”；
drawingContext.fillRect（0,0128128）；
//将画布设置为凹凸贴图
material.bumpMap=新的三点纹理（drawingCanvas）；
//设置变量以跟踪何时绘制
var-paint=false；
//添加画布事件侦听器
drawingCanvas.addEventListener（'mousedown'，函数（e）{
油漆=真
drawStartPos={x:e.offsetX，y:e.offsetY}；
});
drawingCanvas.addEventListener（'mousemove'，函数（e）{
如果（油漆）{
绘制（drawingContext，e.offsetX，e.offsetY）；
}
});
drawingCanvas.addEventListener（'mouseup'，函数（e）{
油漆=假；
});
drawingCanvas.addEventListener（'mouseleave'，函数（e）{
油漆=假；
});
}
//绘图函数
函数绘制（drawContext，x，y）{
moveTo（drawStartPos.x，drawStartPos.y）；
drawContext.lineTo（x，y）；
drawContext.stroke（）；
drawStartPos={x:x，y:y}；
material.bumpMap.needsUpdate=true；
}
函数animate（）{
请求动画帧（动画）；
网格旋转.x+=0.005；
网格旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
stats.update（）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}

正文{
填充：0；
保证金：0；
}
#绘画画布{
位置：绝对位置；
背景色：#000；
顶部：0px；
右：0px；
z指数：3；
}
#threejs容器{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：1；
}

---

我可以通过查看链接到的站点使用凹凸贴图的着色器来查看

我不认为您会为每个字母创建凹凸贴图，您只需要在单个画布上绘制所有图形（文本），并将其作为凹凸贴图应用

单击下面的“运行代码片段”以获得画布凹凸贴图的演示（在白色框中单击并拖动）。
我希望这有帮助

var摄影机、场景、渲染器、网格、材质、统计信息；
var drawStartPos={x:0，y:0}；
init（）；
设置画布绘制（）；
制作动画（）；
函数init（）{
//渲染器。
renderer=new THREE.WebGLRenderer（）；
//renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//将渲染器添加到页面
document.getElementById（'threejs-container'）.appendChild（renderer.doElement）；
//创建相机。
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=400；
//创建场景。
场景=新的三个。场景（）；
//创造材料
材质=新的三个。MeshPhongMaterial（）；
//创建立方体并添加到场景中。
var geometry=新的三个.BoxGeometry（200200200）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
//创建环境光并添加到场景中。
var light=新的三个。环境光（0x404040）；//柔和的白光
场景。添加（灯光）；
//创建平行光并添加到场景中。
var方向灯=新的三个方向灯（0xffffff）；
directionalLight.position.set（1,1,1）.normalize（）；
场景。添加（方向光）；
//添加用于调整窗口大小的侦听器。
window.addEventListener（'resize'，onWindo