CODEWITHSUNDEEP
javascripthtmlcssuser-input
Dave
Dave

Reputation: 121

Create 3D shape from user input?

Im trying to build a simple 3d shape builder (it would always be a rectangle / square that needs to be built) all I want is for the user to be able enter the height, width and depth and the shape is built in real time for them as a line drawing. I have been looking online and found this jsfiddle which is great however I would need it to work in 3d (not just 2d) http://jsfiddle.net/m1erickson/f6E6Y/ but along those lines. Im however completly stuck and left scratching my head on this one...

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var width=2;
var height=35;
var $width=document.getElementById('width');
var $height=document.getElementById('height')

$width.value=width;
$height.value=height;

draw();

$width.addEventListener("keyup", function(){
    width=this.value;
    draw();
}, false);

$height.addEventListener("keyup", function(){
    height=this.value;
    draw();
}, false);


function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillRect(40,40,width,height);
}

Any ideas?

Upvotes: 1

Views: 1071

Answers (1)

user2570380
user2570380

Reputation:

Dealing with 3D is much easier with a library. Three.js is a popular one. They also have a demo for what you've described: http://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry

The controls on the top-right will allow you to adjust the dimensions of the object in real-time. Modifying this example will be much more easier than writing it from scratch, unless you'd like to learn vanilla WebGL.

Upvotes: 1

Related Questions