X3DOM挤出模型出现扭曲问题，如何解决？

问题现象 #

使用三角函数生成装饰结的3D挤出坐标时，部分位置的挤出形状会发生扭曲，外观显得不协调，需要找出问题原因并解决。

完整示例中问题的特写

最小复现示例 #

已将问题简化为两个最小示例：一个显示正常，另一个存在扭曲问题。观察发现至少需要4个脊点才会触发该问题。

<html> 
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <title>X3DOM Knot</title> 
    <script type='text/javascript' src='https://www.x3dom.org/release/x3dom-full.js'> </script> 
    <link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'></link> 
</head> 
<body> 
<h1>Prototype</h1>
<h2>This one looks fine</h2>
<x3d width='200px' height='200px'> 
    <scene>
        <shape>
            <appearance><material diffuseColor='0 0 1'></material></appearance> 
            <extrusion crosssection="0 0.2, 0.2 0, 0 -0.2, -0.2 0, 0 0.2"
            spine="0.06979899340500256 -1.9987816540381915 -0.6021273936415662, 0.34729635533385994 -1.9696155060244163 -0.7777777777777772, 0.6180339887498945 -1.9021130325903073 -0.9642246120749118, 0.8767422935781548 -1.797588092598334 -1.1584796584121726">
            </extrusion>
        </shape>
    </scene>
</x3d>
<h2>This one has the twist</h2>
<x3d width='200px' height='200px'> 
    <scene>
        <shape>
            <appearance><material diffuseColor='0 0 1'></material></appearance> 
            <extrusion crosssection="0 0.2, 0.2 0, 0 -0.2, -0.2 0, 0 0.2"
            spine="0.07048223458426904 -2.0183471215009843 -0.6021273936415662, 0.34729635533385994 -1.9696155060244163 -0.7777777777777772, 0.6240837360413788 -1.9207322402333793 -0.9642246120749118, 0.9102308692553865 -1.8662498479583811 -1.1584796584121726">
            </extrusion>
        </shape>
    </scene>
</x3d>
</body>
</html>

已尝试的操作及疑惑 #

• 尝试将每个脊点的方向设置为常量，无效果
• 无法理解为何部分脊点间的过渡平滑，另一些情况却出现扭曲

内容的提问来源于stack exchange，提问作者Martyn Shaw