Search code examples
htmlx3d

How to apply a texture to an object made using extrusion

I can apply without problems a texture to an object made using indexedfaceset but when i try to apply a texture to an object made using extrusion its like the faces of the object are not there. Example:

enter image description here enter image description here

figure on the left is the result applying normal colors, and on the right applying the texture.

Here is the code when applying the textures:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Castle</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>
        <switch whichChoice="-1">
            <extrusion id="wall" convex="true"
                       crossSection="
                      -1 -0.5
                      -0.7 -0.4
                      -0.4 -0.35
                      0 -0.3
                      0.4 -0.35
                      0.7 -0.4
                      1 -0.5
                      1 0.2
                      0.7 0.3
                      0.4 0.35
                      0 0.4
                      -0.4 0.35
                      -0.7 0.3
                      -1 0.2
                      -1 -0.5"
                       spine="
                       0 -1 0
                       0 0 0"
                       scale="
                       1 1
                       1 1">
            </extrusion>
        </switch>
        <transform translation="0 0 0" scale="1 1 1">
            <shape>
                <Appearance>
                    <ImageTexture url="castle_walls.jpg">
                    </ImageTexture>
                </Appearance>
                <x3dgeometrynode use="wall"></x3dgeometrynode>
            </shape>
        </transform>
    </scene>
</x3d>
</body>
</html>

Any help would be appreciated.

Solution

  • Texture coordinates are automatically generated by Extrusion nodes. Textures are mapped so that the coordinates range in the U direction from 0 to 1 along the crossSection curve (with 0 corresponding to the first point in crossSection and 1 to the last) and in the V direction from 0 to 1 along the spine curve (with 0 corresponding to the first listed spine point and 1 to the last). If either the endCap or beginCap exists, the crossSection curve is uniformly scaled and translated so that the larger dimension of the cross-section (X or Z) produces texture coordinates that range from 0.0 to 1.0. The beginCap and endCap textures' S and T directions correspond to the X and Z directions in which the crossSection coordinates are defined.