VRML Wall with a window

Question

I'm trying to make a model of a wall with a window in the middle using an IndexedFaceSet and I have no idea how to accomplish that.

here's my code:

#VRML V2.0 utf8

Shape {
    appearance Appearance {
        material Material {
            diffuseColor 1.0 1.0 1.0
        }
        texture ImageTexture {
            url "textures/stone.jpg"
        }
    }
    geometry IndexedFaceSet {
        coord Coordinate {
            point [
                -5.0 0.0 -1.0, -2.5 0.0 0.0,
                 2.5 0.0 0.0,  5.0 0.0 -1.0,
                 5.0 4.0 -1.0,  2.5 4.0 0.0,
                -2.5 4.0 0.0, -5.0 4.0 -1.0,
            ]
        }
        texCoord TextureCoordinate {
            point [
                0.0 0.0,  0.7 0.0,  0.7 0.7,  1.3 0.7,
                1.3 0.0,  2.0 0.0,  2.0 1.0,  0.0 1.0
            ]
        }
        coordIndex [ 0, 1, 2, 3, 4, 5, 6, 7 ]
        convex FALSE
        solid FALSE
    }
}

This is the wall of a cabin. I need, I guess, another IndexedFaceSet in the middle that will act as a hole in the wall, or in my case as a glass window. It's for a school project.

Thank you

Answer 1

Building a correct VRML model

VRML has a lot of power for modelling, however, a VRML-browser is primarily not intended to compute any object boolean-set-operations, but to solve their superposition & apply ther visual properties to create a scene view

Thus building your model has to rely on own geometry with some trivial transformation ( Rotate / Translate ), but without any solid modeling algebra

( Shape_A + Shape_B as an example of union operation ( aka "glue" solid shapes together ) is not possible )

( Shape_A - Shape_B as an example of subtract operation ( aka "drill" a hole of a shape equal to Shape_B into body of Shape_A ( remove material from _A ) is also not possible )

Yes, there are object hierarchies in VRML for some smarter grouping of objects, but these do not create a way to make a hole into the wall for a window, nor making a Box with a material properties of glass ( opacity, reflexivity, etc. ) will not visually render the scene-graph to show transparently a panorama alike one sees when looking through the window in the wall.

If not irreversibly fixed to IndexedFaceSet{} one may create a wall per-partes, from four pieces ( a leftSideBox, a bottomBaseBox, a rightSideBox and an upperLintelBox ) as a sort of assembly or brick-laying, all of these boxes arranged carefully, side by side, to form a wall, while also "surrounding" the free space for the intended glass window.

In principle, this quad-box approach ( and omitting the adjacent faces on their respective parts of the contact planes ) being decomposed into a set of trivial surface triangles, may serve as an easy way to assemble the same via IndexedFaceSet{}. However the coding of 3D coordinates for each of these would be rather tedious ( if not using any solid-modelling software generator with VRML-output ).

Yes, texturing such facettes is another level of complexity to solve, however much simpler, than to make a glass window that will show nothing but the stone of the wall.

For faces to be properly showing up, it is important to keep a 2D-face normal-vector pointing "outside" the 3D-body ( corners have to be indexed in counter-clockwise order, so that right hand fingers follow the ccw-direction and thumb points "outwards" -- in a direction from the ccw-defined edge of the 2D-facette.

Have a look

#VRML V2.0 utf8

Background {   skyColor 0.9 0.9 1.0
               }
Viewpoint {    position 1.5 -1.5 1.75
               }
Transform {    translation 0, 0, 0
               children
               Shape {  appearance Appearance { material Material { diffuseColor 0.2 0.8 1.0 
                                                                    }
                                                }
                        geometry Box {          size 3 1 1
                                                }
                        }
               }
Transform {    translation 0, 0, 2
               children
               Shape {  appearance Appearance { material Material { diffuseColor 0.2 0.8 1.0 
                                                                    }
                                                }
                        geometry Box {          size 3 1 1
                                                }
                        }
               }
Transform {    translation 1,0,1
               children
               Shape {  appearance Appearance { material Material { diffuseColor 0.2 0.8 1.0 
                                                                    }
                                                }
                        geometry Box {          size 1 1 1
                                                }
                        }
               }
Transform {    translation -1,0,1
               children
               Shape {  appearance Appearance { material Material { diffuseColor 0.2 0.8 1.0 
                                                                    }
                                                }
                        geometry Box {          size 1 1 1
                                                }
                        }
               }

asHtml

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta>
    <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/x3dom/release/x3dom.css'></link>
    <script type='text/javascript' src='http://www.x3dom.org/x3dom/release/x3dom.js'></script>
  </head>
  <body>
    <x3d id='someUniqueId' showStat='false' showLog='false' x='0px' y='0px' width='400px' height='400px'>
      <scene DEF='scene'>
        <background skyColor='0.9 0.9 1'></background>
        <viewpoint position='0 -2.5 1.75'></viewpoint>
        <transform>
          <shape>
            <appearance>
              <material diffuseColor='0.2 0.8 1'></material>
            </appearance>
            <box size='3 1 1'></box>
          </shape>
        </transform>
        <transform translation='0 0 2'>
          <shape>
            <appearance>
              <material diffuseColor='0.2 0.8 1'></material>
            </appearance>
            <box size='3 1 1'></box>
          </shape>
        </transform>
        <transform translation='1 0 1'>
          <shape>
            <appearance>
              <material diffuseColor='0.2 0.8 1'></material>
            </appearance>
            <box size='1 1 1'></box>
          </shape>
        </transform>
        <transform translation='-1 0 1'>
          <shape>
            <appearance>
              <material diffuseColor='0.2 0.8 1'></material>
            </appearance>
            <box size='1 1 1'></box>
          </shape>
        </transform>
      </scene>
    </x3d>
  </body>
</html>