使用HTML x3DOM挤出制作3D弧

时间:2018-05-06 11:26:19

标签: html 3d x3d

我试图找到信息,但一般都找不到关于html x3dom的大量信息,无论如何我想用3D制作圆弧形状,但我只是得到了这个形状:

enter image description here

这是我的代码:

<html>
<head>
    <meta charset="utf-8">
    <title>Arc X3D</title>
    <script type='text/javascript' src='x3dom-full.js'>
    </script>
    <link rel='stylesheet' type='text/css' href='x3dom.css' />
</head>
<body>
    <x3d width="512px" height="512px">
        <scene>
            <background skyColor="0.9375 0.8984 0.5469"><!-- khaki -->
            </background>
            <switch whichChoice="-1">
            <extrusion id="arc" convex="false"
                  crossSection="
                  0.5 -1
                  0.5 1
                  -0.5 1
                  -0.5 -1
                  0.5 -1"
                  spine="
                  0 -1 0
                  0 -.9 0
                  0 -.7 0
                  0 -.5 0
                  0 0 0
                  0 .5 0
                  0 .7 0
                  0 .9 0
                  0 1 0"
                  scale="
                  1 1
                  0.9 1
                  0.8 1
                  0.7 1
                  0.6 1
                  0.7 1
                  0.8 1
                  0.9 1
                  1 1">
            </extrusion>
            </switch>
            <transform id="Arc">
                <transform translation="0 0 0" scale="1 2 1">
                    <shape>
                        <appearance>
                            <twosidedmaterial diffuseColor="red"></twosidedmaterial>
                        </appearance>
                        <x3dgeometrynode use="arc"></x3dgeometrynode>
                    </shape>
                </transform>
            </transform>
        </scene>
    </x3d>
</body>
</html>

有没有办法让它向内弯曲而另一边向外弯曲,以获得弧形状?

提前致谢。

1 个答案:

答案 0 :(得分:0)

在改变一些事情后,我找到了解决问题的方法:

var arr = ["red","blue","green,yellow,orange","purple,black"];

var result = arr.join(',').split(',');

console.log(result);

解决方案是在2D中制作弧形,然后通过挤出赋予它体积

最终结果:

enter image description here