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="42" type="text"></input>
        <button onclick="getElementById(1).value--" >less</button>
        <button onclick="getElementById(1).value++" >more</button>
        <!--<button onclick="init()" >action</button>-->
    </div>
    <div>
        last command:<span id="2"></span>
    </div>

<!--<canvas id="myCanvas" width="531" height="752" style="border:1px solid #d3d3d3;">-->
<!--Your browser does not support the HTML5 canvas tag.</canvas>-->


</body>
</html>

JavaScript

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

// create a sphere
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({
    color: 0x7777FF,
    wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// position the sphere
sphere.position.set(20, 4, 2);

// add the sphere to the scene
scene.add(sphere);

// position and point the camera to the center of the scene
//        camera.position.set(350, 50, 5000);

var constructPathShape;// = new THREE.Shape(); 
//      var constructPathShape = new THREE.Path(); 


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

init();

    




function action(){
    while(scene.children.length > 0){ 
        scene.remove(scene.children[0]); 
    }    
    scene.add(sphere);    
    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...