Első példa kicsit másként

Csatlakozás már létező vászon objektumhoz

Második nekifutásra egy létező, a weboldalba ágyazott, rögzített méretű vászonhoz csatlakoztatjuk a renderelőt. Megismerkedünk az interaktív vezérlés egyik módjával is.

Forráskód

Eredmény megtekintése külső ablakban (ThreeJsCanvasExample.html).

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Three.js Canvas Example</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body onload="init()">

<h1>Three.js megjelenítés létező HTML5 canvas objektumban</h1>

<div>
    <canvas id="myCanvas" width="400" height="200" border="1px"></canvas>
</div>

<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script>
    var scene, camera, renderer;
    var controls;
    var geometry, material, mesh;

    function init() {
        container = document.getElementById( 'myCanvas' );
        renderer = new THREE.WebGLRenderer( { antialias: true, canvas: container } );
        renderer.setSize( container.clientWidth, container.clientHeight );

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 0.1, 1000 );
        camera.position.z = 15;

        controls = new THREE.TrackballControls( camera, renderer.domElement );
        controls.rotateSpeed = 5.0;
        controls.panSpeed = 1.0;

        //geometry = new THREE.BoxGeometry( 10, 10, 10 );
        geometry = new THREE.SphereGeometry( 8, 50, 30);
        material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
        mesh = new THREE.Mesh( geometry, material );
        mesh.rotation.z = 0.2;
        scene.add( mesh );

        var axisHelper = new THREE.AxisHelper( 12 );
        scene.add( axisHelper );

        render();
    }

    var render = function () {
        requestAnimationFrame( render );
        controls.update();
        renderer.render(scene, camera);
    };

</script>
</body>
</html>

Vászon definíció és csatlakozás

Figyeljük meg, hogy a vászonra vonatkozó stílusdefiníciót kivettük a fejlécből!

A HTML definíciós részben (nem a JavaScript kódban!) definiáljuk a vásznat. Az id attribútummal nevet adunk neki, ezzel a névvel tudjuk az összekapcsolást elvégezni. Beállítjuk a rögzített méretet is.

<div>
    <canvas id="myCanvas" width="400" height="200" border="1px"></canvas>
</div>

Szkriptünk init() függvényében elvégezzük az összerendelést. Figyeljük meg, hogy a renderelőnek átadjuk a vászon DOM objektumát.

Figyeljünk arra, hogy a renderelő méretét és a kamera paramétereket ne a window, hanem a container objektum adataival számoljuk ki! Jobban függetleníthetjük a kódunkat a két eset különbözőségétől, ha felveszünk globális változókat a szélességre (pl. WIDTH) és magasságra (HEIGHT), az init() függvényünk elején típustól függően kezdőértéket adunk, majd ezeket a változókat használjuk a kód további részében.

container = document.getElementById( 'myCanvas' );
renderer = new THREE.WebGLRenderer( { antialias: true, canvas: container } );
renderer.setSize( container.clientWidth, container.clientHeight );

camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 0.1, 1000 );

Mivel a vászon mérete rögzített, ezért nincs szükség az ablak méretváltozásának követésére.

Interaktív egérvezérlés

A kamera paramétereket interaktívan az egérrel is vezérelhetjük. Ehhez a Three.js példakönyvtárában többféle kész kódot is találunk. Ebben a példaprogramban a TrackballControlls.js fájlt használjuk. Mivel ez a Three.js magján kívüli kód, külön be kell másolni a js mappába! A three.js mellett ezt is be kell emelni a kódba.

Működése

A bal egérgomb lenyomásával foroghatunk az origó körül. A görgő segítségével zoomolhatunk. A jobb egérgomb lenyomásával mozgathatjuk a kamerát.

<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>

Az init() függvényünkben hozzunk létre egy új vezérlőt és állítsuk be a vezérlés sebességét.

controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 5.0;
controls.panSpeed = 1.0;

A render() függvényben frissítsük a megjelenítést.

controls.update();

Megjegyzések

Az r80 kiadásban szereplő TrackballControls implementációban elrontották az egérgörgő kezelését! Ezért a példaprogramjainkban az r79 kiadásban szereplő verziót használjuk helyette! A példaprogram gyűjtemény tartalmazza mindkét változatot. A js mappában az r80, a js-r79 mappában az előző JavaScript források találhatók, így elegendő importáláskor az elérési útvonalon szükség szerint változtatni.
A kamera mozgatással kapcsolatos további lehetőségekkel egy későbbi fejezetben fogunk részletesebben foglalkozni!