Canvas kontroll

Hva

I dette eksempelet vil vi ha mer kontroll over hvor og hvordan scenen framstilles. Vi ønsker å definere vår egen canvas og vi vil at scenen skal skalere når vi endrer størrelsen på canvas, som igjen skaleres til å fylle hele vinduet.

Vi setter opp en funksjon som skal plukke opp endringer i vindusstørrelse (effekten av dette ser du selvsagt bare når du åpner eksempelet i et eget vindu.

var myScene;
var canvas=document.getElementById("myCanvas");

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

// we want to keep it square when rezinig windo
function onWindowResize() {
    canvas.width=canvas.height=
        Math.min(window.innerWidth, window.innerHeight);
    // update
    myScene.needFrame();
}

Beskrivelsen av selve scenen er slik, geometrien i dette eksempelet er en sylinder:

myScene= SceneJS.createScene({
    // use my canvas
    canvasId: "myCanvas",
    // Make it transparent
    transparent: true,

    nodes:[
        {
            type:"lookAt",
            eye:{ x:4, y:5, z:7 },
            look:{ x:0, y:0, z:0 },               
            nodes:[
                {
                    type:"material",
                    color:{ r:1.0, g:0.5, b:0.0 },
                    nodes:[
                        {
                            type:"rotate",
                            y:1.0,z:1.0,
                            angle:60,
                            nodes:[
                                {
                                type:"geometry/cylinder",
                                radiusTop:0.5, 
                                radiusBottom:4, 
                                height:2, 
                                radialSegments:20, 
                                heightSegments:1, 
                                openEnded:true                                     
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});

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/seks0/test.html

Websiden er i sin helhet slik:

<!DOCTYPE html>
<html lang="no">
<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>
<canvas id="myCanvas" width="400" height="400"> </canvas>
<script>
    //globals
    var myScene;
    var canvas=document.getElementById("myCanvas");
    
    SceneJS.setConfigs({
        pluginPath:"../../plugins"
    });
    
    // we want to keep it square when rezinig windo
    function onWindowResize() {
        canvas.width=canvas.height=
            Math.min(window.innerWidth, window.innerHeight);
        // update
        myScene.needFrame();
    }
    
    //Define scene
    myScene= SceneJS.createScene({
        // use my canvas
        canvasId: "myCanvas",
        // Make it transparent
        transparent: true,
    
        nodes:[
            {
                type:"lookAt",
                eye:{ x:4, y:5, z:7 },
                look:{ x:0, y:0, z:0 },               
                nodes:[
                    {
                        type:"material",
                        color:{ r:1.0, g:0.5, b:0.0 },
                        nodes:[
                            {
                                type:"rotate",
                                y:1.0,z:1.0,
                                angle:60,
                                nodes:[
                                    {
                                    type:"geometry/cylinder",
                                    radiusTop:0.5, 
                                    radiusBottom:4, 
                                    height:2, 
                                    radialSegments:20, 
                                    heightSegments:1, 
                                    openEnded:true                                     
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    });
    //Scene defined
    // pick up resizing
    window.addEventListener( 'resize', onWindowResize, false );
    onWindowResize();
    
</script>
</body>
</html>