Three.js megjelenítés létező HTML5 canvas objektumban

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

Csomag elérési útvonalak megadása:

        <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">

Már létező vászonhoz csatlakozás:

        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 );

Interaktív vezérlés egérrel importálás:

        import { TrackballControls } from 'TrackballControls';;

    //function init()-ben:
        controls = new TrackballControls( camera, renderer.domElement );
        controls.rotateSpeed = 5.0;
        controls.panSpeed = 1.0;

    // function animate()-ben:
        controls.update();

A modellező területen bal egérgomb lenyomása, majd nyomva tartása mellett egér mozgatása.