three.js如何使曲面更平滑？

我的问题：最近，我在学习THREE.js为了可视化一个化学结构，像这样：n3
但是，为了使绘制的表面看起来更平滑，我选择使用尽可能多的三角形，这些三角形存储在BufferGeometry数据结构中。这导致了一个大问题：存储三角坐标的jso
文件非常大，甚至超过了200MB，这不利于网络传输，并且占用了大量存储空间。
因此，我想知道是否有3JS解决这个问题的方法？我曾经想知道是否可以使用少量的三角形坐标，然后使用插值生成更多的三角形，但似乎没有例子来说明我的假设过程，所以我发现很难做这种实验。这个问题可以解释为如何使下图中的曲面更加平滑。这样，我不需要大文件，但仍然可以看到平滑的表面。n1
这让我困惑了很长时间，有人能给我一些建议吗？非常感谢你，如果你能~
我想你正在寻找平滑/平均法线（增加启用平面着色的三角形数量将不起作用，你必须细分模型，直到每个三角形在任何屏幕上都近似于单个像素的大小。）
（1）如果你使用Blender创建模型，您只需选择模型，按F3（或space）并搜索Shade Smooth。
（2）如果模型是按三个步骤生成的，您可以尝试使用Geometry.computeVertexNormals8（生成几何图形后，只需执行一次即可）：nmodel.geometry.computeVertexNormals();
此外，如果您在途中的某个地方启用它，确保模型材质的flatShading 10处于禁用状态。
导出模型时，每个三角形都是单独的，而不是共享顶点，因此每个面都有自己的垂直法线。这个问题似乎在OBJ格式中最为常见，但不是由它引起的，而是由建模软件导出引起的。
您应该尝试从创建它的软件中修复它，或者尝试使用>以连接共享相同位置的三元组，然后再连接yourGeometry.computeVertexNormals()。nmjurczyk:blockquote感谢您的友好回复，大约是任何屏幕上单个像素的大小，但实际上我的目的是使曲面更平滑，而不是连接具有相同位置的三角形。目前，我使用下面的code来存储几何数据：变量“positions”存储三角形“coordinates”，变量“normal”存储三角形的
ormal>
这样，三角形“coordinates”越多，曲面就越平滑。
正如您所见，当前曲面（下图）不够平滑。我想知道如何使它更平滑，使用插值或某种方式？
我没有使用Blender创建模型，只是一些三角形的坐标。
强烈建议共享顶点，它不会更改几何体三角形数，每个常规几何体都会执行此操作，除非对于不应共享UV或法线等属性的零件。
如果不共享顶点，您将无法使用computeVertexNormals，您只能根据创建几何体的方程式自己计算法线，以防万一。
您缺少的是索引，描述哪些属性形成三角形，而不是为每个三角形创建新的属性，这样也会大大减少内存。
是的，如果我没有误解你的意思，你是说通过共享顶点，我可以共享一些属性，例如，每个三角形的颜色，并由此减少内存？但是，除非我增加三角形的数量，否则此解决方案将无法平滑曲面？但是现在我只有少量的三角形坐标，但我希望曲面更平滑。我不想在视觉化时减少记忆，但是减少存储三角形坐标的文件的大小。
当前的问题是我无法获得更多三角形的顶点坐标，以获得每个三角形在任何屏幕上都近似于单个像素大小的结果。
绝对有不需要更多的三角形，有更多的三角形已经足够了。这里的平滑只意味着法线被加权/连续，对于某个位置的每个顶点都是一样的（因此你不应该在这里浪费内存），而在你的几何体中不是这样的，它们垂直于每个三角形。
因此，除了节省内存之外，你还可以得到一个平滑的曲面，您可以尝试此操作并查看>
您不需要合并顶点如果您在构建几何体时自己构建索引，那么自己计算法线并不总是可能的，而在computeVertexNormals中发生的事情是一个非常常见的常规问题用于计算平滑着色的平均法线的方法。
为了更好地理解法线，您可以查看法线辅助对象示例，红线指示法线对齐的方向，您可以看到，在曲面（如球体）上，在指向某个平均方向的位置上只有1，对于一个立方体，每个立方体的面都有3个锐利的边。
可视化的法线：Ayuuu:
当前的问题是，我无法获得更多三角形的顶点坐标，因此每个三角形在任何一个立方体上都近似于一个像素的大小屏幕。
只是为了澄清-“将三角形细分到每个像素大小”是绝对不严肃的-这就是为什么@Fyrestar和我都提到增加三角形数量不是正确的方法。
谢谢~
然后我修改了我的>
但是出现了一个错误：n<image1071×474但是geom已经被定义了，你知道会发生什么吗？nBufferGeometryUtils不是核心的一部分，您需要从examples文件夹中包含它：nexamples/js/utils/BufferGeometryUtils.js
工作得很好！非常感谢你
顺便问一下，你知道如何使它更平滑吗？凹陷的边缘看起来不柔和，有三角形的尖角。nimage835×631 KB
仅仅看它很难分辨，你能分享几何吗？从第一幅图像判断，可能是由于顶点太近而导致细节清晰且不匹配三角形顶点。
您可以增加mergeVertices中的tolerance参数。
我只能提供三角形的顶点坐标：nvertices_cart_fs.json（2.8 MB）
下面的code显示了我如何使用jso
文件提供的信息===平面[2][2]*fsScale；位置[=bx；位置[k+=cy；位置[k+8==0）{color.setRGB（237/255，237/255，101/255）；//yellow}如果（平面[0][3]==1），则为else{color.setRGB（204/255，25/255，204/255）；//purple}如果（平面[0][3]==2），则为else{color.setRGB(0/255, 204/255, 204/255);//浅蓝色}else如果（平面[0][3]==3）{color.setRGB（204/255，25/255，0/255）；//红色}如果（平面[0][3]==4），则为else{color.setRGB（25/255，204/255，69/255）；//绿色}else如果（平面[0][3]==5）{color.setRGB（25/255，25/255，204/255）；//深蓝色}颜色[=color.r；颜色[k+=color.g；颜色[k+=3.BufferGeometryUtils.mergeVertices（geom）；几何计算顶点法线（）；似乎我将mergeVertices中的tolerance参数更改为0.001、0.01和1，因为默认值是0.0001，但是在我增加mergeVertices之后没有任何更改</image1071×474但是geom已经被定义了，你知道会发生什么吗？
How to make the surface smoother?n

three.js如何使曲面更平滑？

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形