Egyszerű vezérlők és FPS számláló hozzáadása

Importmap definíciók

    <script async src="./dist/es-module-shims.js"></script>
    <script type="importmap">
    {
        "imports": {
            "three": "./js/build/three.module.js",
            "stats": "./js/examples/jsm/libs/stats.module.js",
            "lil-gui": "./js/examples/jsm/libs/lil-gui.module.min.js"
        }
    }
    </script>

Importálások

    import Stats from 'stats';>
    import { GUI } from 'lil-gui';

    let container;
    let WIDTH, HEIGHT
    let OFFSETLEFT, OFFSETTOP;>
    let aspectRatio;
    let scene, camera, renderer;
    let stats;
    let geometryBox, geometrySphere;
    let material;
    let meshBox, meshSphere;
    let egBox, egBoxLines, egSphere, egSphereLines;
    let renderObject, lastRenderObject;

    let guiParams = {
        rotationX: 0.01,
        rotationY: 0.005,
        colorSolid: 0x0,
        colorWire: 0x0,
        object: 'kocka',
        stopButton: function() {
            this.rotationX = 0;
            this.rotationY = 0;
        }
    };

    function addStatsObject() {
        stats = new Stats();
        stats.setMode(0);

        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = OFFSETLEFT + 'px';
        stats.domElement.style.top = OFFSETTOP + 'px';
        document.body.appendChild( stats.domElement );
    }

    function addControlGui( controlObject ) {
        let gui = new GUI( { autoPlace: false });
        gui.add( guiParams, 'rotationX', -0.01, 0.01).step(0.001).listen();
        gui.add( guiParams, 'rotationY', -0.01, 0.01).listen();
        gui.addColor( guiParams, 'colorSolid');
        gui.addColor( guiParams, 'colorWire');
        gui.add( guiParams, 'object', [ 'kocka', 'gömb' ] ).name( 'Tárgy' );
        gui.add( guiParams, 'stopButton').name( 'Forgás állj!' );

        document.body.appendChild( gui.domElement );
        gui.domElement.style.position = 'absolute';
        gui.domElement.style.top = OFFSETTOP + 'px';
        gui.domElement.style.left = OFFSETLEFT + WIDTH - gui.width + 'px';
        const gui_rect = gui.domElement.getBoundingClientRect();
        gui.domElement.style.left = OFFSETLEFT + WIDTH - gui_rect.width + 'px';
    }

    function init() {
        container = document.getElementById( 'myCanvas' );
        WIDTH = container.clientWidth;
        HEIGHT = container.clientHeight;
        OFFSETLEFT = container.offsetLeft;
        OFFSETTOP = container.offsetTop;
        aspectRatio = WIDTH / HEIGHT;

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

        geometryBox = new THREE.BoxGeometry( 10, 10, 10 );
        geometrySphere = new THREE.SphereGeometry( 8, 50, 30);
        material = new THREE.MeshBasicMaterial( { color: 0x333388, wireframe: false } );
        meshBox = new THREE.Mesh( geometryBox, material );
        meshSphere = new THREE.Mesh( geometrySphere, material );
        scene.add( meshBox );

        egBox = new THREE.EdgesGeometry( geometryBox );
        egBoxLines = new THREE.LineSegments( egBox, new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } ) );
        meshBox.add( egBoxLines );

        egSphere = new THREE.EdgesGeometry( geometrySphere );
        egSphereLines = new THREE.LineSegments( egSphere, new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } ));
        meshSphere.add( egSphereLines );

        camera.position.z = 18;

        renderObject = 'kocka';
        lastRenderObject = 'kocka';
        guiParams.colorSolid = material.color.getHex();
        guiParams.colorWire = egBoxLines.material.color.getHex();

        addControlGui();
        addStatsObject();

        render();
    }

    function animate() {
        if( lastRenderObject !== guiParams.object ) {
            lastRenderObject = guiParams.object;
            scene.remove(scene.children[0]);
            if( guiParams.object === 'kocka' ) {
                scene.add( meshBox );
            } else {
                scene.add( meshSphere );
            }
        }

        if( guiParams.object === 'kocka') {
            meshBox.material.color = new THREE.Color( guiParams.colorSolid );
            meshBox.rotation.x += guiParams.rotationX;
            meshBox.rotation.y += guiParams.rotationY;
            egBoxLines.material.color = new THREE.Color( guiParams.colorWire );
        }

        if( guiParams.object === 'gömb' ) {
            meshSphere.material.color = new THREE.Color( guiParams.colorSolid );
            meshSphere.rotation.x += guiParams.rotationX;
            meshSphere.rotation.y += guiParams.rotationY;
            egSphereLines.material.color = new THREE.Color( guiParams.colorWire );
        }>

        stats.update();>

        requestAnimationFrame( animate );
        render();
    }

    function render() {
        renderer.render(scene, camera);
    }