Geometri og struktur

Hva

SceneJS [1] har en litt annen innfallsvinkel enn three.js [2] . I SceneJS står scenegrafen sentralt. Dette er en hierarkisk trestruktur som ligner på den vi finner i VRML [3] eller i X3D [4] .

En scene er bygd opp av noder. En node kan være en geometri, en transfomasjon, et kamera, etc. Trestrukturen assosierer til push og pop strategien vi bruker nå vi programmerer i klassisk OpenGL, men er mer grunnleggende siden den også grupperer geometrier og modeller.

SceneJS har en rekke basisfiguren som kloss, kule, sylinder, flate, torus, og for illutrasjonens skyld den klassiske "Utah Teapot" [5] .

Vi ser på et enkelt eksempel. Beskrivelsen av scenen er slik:

var scene = SceneJS.createScene({
    nodes:[
        {
            type:"lookAt",
            eye:{ x:4, y:5, z:7 },
            look:{ x:0, y:1, z:0 },
            nodes:[
                {
                    type:"material",
                    color:{ r:0.3, g:0.3, b:1.0 },
                    nodes:[
                        {
                            type:"rotate",
                            y:1.0,
                            angle:60,
                            nodes:[
                                {
                                    type:"geometry/box",
                                    xSize: 2,ySize: 2,zSize: 2                                   
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});

I tillegg har SceneJS laget en automatisk innhenting av nødvedige plugins, vi trenger bare si hvor de er:

SceneJS.setConfigs({
    pluginPath:"../plugins"
});

Og slik ser det ut, i en iframe

Hvis du vil kan du se den i et eget vindu, og inspisere kildekoden:
test https://borres.hiof.no/wep/webgl/scenejs/geometri/test.html

Websiden er i sin helhet slik:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>simple</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
   <style>
        body {margin: 0px;background-color: #ffffff;overflow: hidden;}
    </style>
    <script src="../scenejs.js"></script>
</head>
<body>
<script>
    //locate plugins
    SceneJS.setConfigs({
        pluginPath:"../plugins"
    });
    //plugins located
    //Define scene
    var scene = SceneJS.createScene({
        nodes:[
            {
                type:"lookAt",
                eye:{ x:4, y:5, z:7 },
                look:{ x:0, y:1, z:0 },
                nodes:[
                    {
                        type:"material",
                        color:{ r:0.3, g:0.3, b:1.0 },
                        nodes:[
                            {
                                type:"rotate",
                                y:1.0,
                                angle:60,
                                nodes:[
                                    {
                                        type:"geometry/box",
                                        xSize: 2,ySize: 2,zSize: 2                                   
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    });
    //Scene defined
    
</script>
</body>
</html>

Referanser

SceneJS scenejs.org/ 14-05-2011

three.js three.js threejs.org/ 14-09-2014

VRML, Virtual reality Modeling Language en.wikipedia.org/wiki/VRML 14-03-2009

X3D en.wikipedia.org/wiki/X3D 14-03-2009

The Utah Teapot www.sjbaker.org/wiki/index.php?title=The_History_of_The_Teapot 14-03-2009