dynamically create THREE.Shape

by mmalex

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="25" 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, 1, 1000 );
camera.position.set( 0, 50, 700 );
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(){
    howmuch = document.getElementById(1).value;
    var selectedObject = scene.getObjectByName("mesh_name");
    scene.remove( selectedObject );
    constructPathShape = new THREE.Shape();
    constructPathShape.autoClose = false;
	
	// console.log("here")
    
        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];
    
    geometry = new THREE.ShapeBufferGeometry( constructPathShape);
    material.side = THREE.DoubleSide;
   ...