Как закрепить "ползунок" в dat.gui.js?

Question

Задание звучит так: заставить текст увеличиваться или уменьшаться при помощи dat.gui. В целом, этот код умеет его увеличивать или уменьшать, но результат не получается закрепить. Получается, что при использовании этого ползунка он начинает изменятся, но зафиксировать не удаётся. Объясните, пожалуйста, "почему"?

P.S: шрифты, текстуры не обязательны для использования

'<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Scene</title>
    <script src="js/three.js"></script>
    <script src="js/TrackballControls.js"></script>
    <script src="js/dat.gui.min.js"></script>
</head>

<body>

    <script>
        init();

        function init() {
            var renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer({ antialias: true }) : new THREE.CanvasRenderer();
            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);

            document.body.appendChild(renderer.domElement);

            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            var scene = new THREE.Scene();

            var controls = new THREE.TrackballControls(camera);
            var ambiLight = new THREE.AmbientLight(0x141414);
            scene.add(ambiLight);

            var light = new THREE.DirectionalLight();
            light.position.set(0, 80, 200);
            scene.add(light);

            var font;
            var textMesh;

            var fontLoader = new THREE.FontLoader();
            fontLoader.load("fonts/Font.json", function (tex) {
                font = tex;
                createText();
                createGUI();
            });

            function createText() {
                if (textMesh) {
                    scene.remove(textMesh);
                }

                var textGeometry = new THREE.TextGeometry("Scene", {
                    size: settings.fontSize,
                    height: 3,
                    curveSegments: 6,
                    bevelEnabled: true,
                    bevelThickness: 2,
                    bevelSize: 1,
                    bevelSegments: 5,
                    font: font
                });

                var texture = new THREE.TextureLoader().load('Img/fire.jpg');
                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set(0.05, 0.05);
                var material = new THREE.MeshBasicMaterial({ map: texture });

                var extrTexture = new THREE.TextureLoader().load('Img/sky.jpg');
                extrTexture.wrapS = extrTexture.wrapT = THREE.RepeatWrapping;
                extrTexture.offset.set(0, 0.7);
                extrTexture.repeat.set(0, 0.13);
                var extrMaterial = new THREE.MeshBasicMaterial({ map: extrTexture });

                var materials = [material, extrMaterial];
                textMesh = new THREE.Mesh(textGeometry, materials);
                textGeometry.center();
                scene.add(textMesh);
            }

            var settings = {
                fontSize: 20,
            };

            function createGUI() {
                var gui = new dat.GUI();
                gui.add(settings, 'fontSize', 1, 50).onChange(function (value) {
                    settings.fontSize = value;
                    createText();
                });
            }

            camera.position.x = -50;
            camera.position.y = 70;
            camera.position.z = 200;
            camera.lookAt(scene.position);

            renderScene();

            function renderScene() {
                requestAnimationFrame(renderScene);
                controls.update();
                renderer.render(scene, camera);
            }
        }
    </script>
</body>

</html>
'

БЛОГ НА HUSL

Как закрепить "ползунок" в dat.gui.js?

Ответы (0 шт):