Enkel kule

Hva

Her lager vi en enkel animert geometri, en kloss. Vi legger en tekstur på klossen og belyser den med retningsbestemt lys (directional light) og bakgrunnslys (ambient light)

Vi legger demoen i en iFrame for å forenkle koden. Hvis du vil kan du se den i et eget vindu, og inspisere kildekoden:
test https://borres.hiof.no/wep/webgl/threejs/simple/eks2/test.html

Websiden er bygget opp med et script som plasserer tegningen vår i en container. For enkelhets skyld inneholder siden ikke noe annet enn tegningen og en enkel overskrift. Websiden er i sin helhet slik:

<!DOCTYPE html>
<html lang="no">
    <head>
        <title>kloss</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0px;background-color: #000000;overflow: hidden;
            }
            .header{position:absolute;left:0px; top:0px;width:100%;
                    background-color:#ffffff;text-align:center
            }
            .hilitewglmsg{
                margin:50px;width:300px;border-style:solid;border-width:thin;
                background-color:#FEF5CA;padding:5px
            }
        </style>
    </head>
    <body>
        <div class="header">They are all over the place</div>
        <div id="container"> </div>
    
        <script type="text/javascript" src="../../js/three.min.js"> </script>
        <script type="text/javascript" src="../../js/Detector.js"> </script>
        <script type="text/javascript" src="../../js/BSDetect.js"> </script>
        <script>
            var camera, scene, renderer;
            var cube;
            var container = document.getElementById('container');
            if(testWebGL("container"))
            {
                // set up
                init();
                // start animation
                animate();
            }
 
            function init() {
                // set up render element
                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
                 
                // a scene
                scene = new THREE.Scene();
                
                //camera
                camera = new THREE.PerspectiveCamera( 60, 
                                    window.innerWidth / window.innerHeight, 
                                    1, 1000 );
                camera.position.z = 400;
                 
                // cube with texture
                var material = new THREE.MeshLambertMaterial({
                            map: THREE.ImageUtils.loadTexture('officelady2.jpg')
                });
                 cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), material);
                cube.overdraw = true;
                scene.add(cube);

                // light
                var ambientLight=new THREE.AmbientLight(0x444444,0.1);
                scene.add(ambientLight);
                
                var directionalLight = new THREE.DirectionalLight(0xffffff,1);
                directionalLight.position.set(1, -1, 1).normalize();
                scene.add(directionalLight);
 
                // pick up resizing
                window.addEventListener( 'resize', onWindowResize, false );
            }
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
            function animate() {
                requestAnimationFrame( animate );
                cube.rotation.x += 0.005;
                cube.rotation.y += 0.01;
                renderer.render( scene, camera );
            }
        </script>
    </body>
</html>