The task sounds like this: make the text grow or shrink using dat.gui. In general, this code can increase or decrease it, but the result cannot be fixed. It turns out that when using this slider, it begins to change, but cannot be fixed. Please explain “why”?
P.S: fonts and textures are not required for use
<!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>
Many options were used, gpt chat was used, but all to no avail