Skip navigation

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 (01_02_ThreeJsCanvasExample.html). (Megjegyezzük, hogy a HTML kódot itt lerövidítettük.)

<!DOCTYPE html>
<html lang="hu">

<head>
    <meta charset=utf-8>
    <title>Three.js Canvas Example</title>
    <style>
        body { margin: 0; }
    </style>
</head>

<body>

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

<div align="center">
    <canvas id="myCanvas" width="800" height="400"></canvas>
</div>

<script async src="./dist/es-module-shims.js"></script>
<script type="importmap">
{
    "imports": {
         "three": "./js/build/three.module.js",
         "TrackballControls": "./js/examples/jsm/controls/TrackballControls.js"
    }
}
</script>

<script type="module">
    import * as THREE from 'three';
    import { TrackballControls } from 'TrackballControls';

    let WIDTH, HEIGHT, aspectRatio;
    let scene, camera, renderer;
    let controls;
    let geometry, material, mesh;
    let container;
    
    init();
    animate();

    function init() {
        container = document.getElementById( 'myCanvas' );
        // Vászon objektum méretének lekérése és méretarány számítása
        HEIGHT = container.clientHeight;
        WIDTH = container.clientWidth;
        aspectRatio = WIDTH / HEIGHT;

        renderer = new THREE.WebGLRenderer( { antialias: true, canvas: container } );
        renderer.setSize( WIDTH, HEIGHT );

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, aspectRatio, 0.1, 1000 );
        camera.position.z = 15;

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

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

        let axesHelper = new THREE.AxesHelper( 12 );
        scene.add( axesHelper );
    }
    
    function animate() {
        requestAnimationFrame( animate );
        controls.update();
        render();
    }

    function render() {
        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 align="center">
    <canvas id="myCanvas" width="800" height="400"></canvas>
</div>

Szkriptünk init() függvényében elvégezzük az összerendelést. 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' );
HEIGHT = container.clientHeight;
WIDTH = container.clientWidth;
aspectRatio = WIDTH / HEIGHT;

Figyeljük meg, hogy a renderelő létrehozásakor átadjuk a vászon lekérdezett DOM objektumát.

renderer = new THREE.WebGLRenderer( { antialias: true, canvas: container } );
renderer.setSize( WIDTH, HEIGHT );

camera = new THREE.PerspectiveCamera( 75, aspectRatio, 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

Használata

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 mappa megfelelő almappájába és fel kell vennünk az importmap szekcióba.

<script async src="./dist/es-module-shims.js"></script>
<script type="importmap">
{
    "imports": {
        "three": "./js/build/three.module.js",
        "TrackballControls": "./js/examples/jsm/controls/TrackballControls.js"
    }
}
</script>

Majd be kell importálnunk.

import { TrackballControls } from 'TrackballControls';

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 TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 5.0;
controls.panSpeed = 1.0;

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

controls.update();

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.

Megjegyzés