JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<!DOCTYPE html>
<html>
      
<body>
    <div>
        number of commands: 
        <input id="1" name="anzBefehle" value="10" type="text" />
        <button onclick="lessPath()" >less</button>
        <button onclick="morePath()" >more</button>
        <!--<button onclick="init()" >action</button>-->
    </div>
    <div>
        last command:<span id="2"></span>
    </div>
</body>
</html>

JavaScript

function lessPath(){document.getElementById(1).value--; renderScene();}
function morePath(){document.getElementById(1).value++; renderScene();}

container = document.createElement( 'div' );
document.body.appendChild( container );

var scene = new THREE.Scene();

// create a camera, which defines where we're looking at.
//var camera = new THREE.PerspectiveCamera(45, parseInt(531) / parseInt(752), 1, 1000);
//        camera = new THREE.PerspectiveCamera(45, parseInt(700) / parseInt(1000), 1, 10000);


camera = new THREE.PerspectiveCamera( 50, 531 / 752, 0.1, 1000 );
camera.position.set( 0, 1, 600 );
scene.add( camera );


// create a render and set the size
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( parseInt(531), parseInt(752) );

renderer.setClearColor(new THREE.Color(0xf0f0f0));

var constructPathShape;

var howmuch;
var i = 0;
var command = [];

init();

    




function action(){
    while(scene.children.length > 0){ 
        scene.remove(scene.children[0]); 
    }    
    howmuch = document.getElementById(1).value;
    constructPathShape = new THREE.ShapePath();
    //constructPathShape.autoClose = false;
    
        if (howmuch>i) {
        document.getElementById(1).value = i; 
        howmuch = i;
        alert("maximale Anzahl Befehle erreicht")
    }
    for (j=0;j<howmuch;j++){
      eval(command[j]);
    }
    document.getElementById(2).innerHTML = command[j-1];
    var simpleShapes = constructPathShape.toShapes( true );
    for ( var j = 0; j < simpleShapes.length; j ++ ) {
            var simpleShape = simpleShapes[ j ];
            var shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
                    depth: 2,
                    bevelEnabled: false
            } );
            var material = new THREE.MeshLambertMaterial({
                color: 0xff8800
            });
            
            var mesh = new THREE.Mesh( shape3d, material );
//        ...