how to convert a 2d path to a 3d shape in Three.js?

Posted by VirtualWorld on Stack Overflow See other posts from Stack Overflow or by VirtualWorld
Published on 2012-06-24T05:00:40Z Indexed on 2012/06/24 9:16 UTC
Read the original article Hit count: 347

Filed under:

webgl

|

three.js

i need to have the 3d of this: http://jsfiddle.net/dAdKm/
but when i use this code:

var shape = new THREE.Shape();
shape.moveTo(20,20);
shape.bezierCurveTo(20, 100, 150, 100, 150, 20);
shape.moveTo(20,20);
shape.lineTo(20, 100);
shape.lineTo(150, 100);
shape.lineTo(150, 20);

var shape3d = shape.extrude(extrudeSettings);
var shapePoints = shape.createPointsGeometry();
var shapeSpacedPoints = shape.createSpacedPointsGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var shapeMesh = new THREE.Mesh(shape3d, material);

the result is not same as 2d context result, why? what is the problem?

© Stack Overflow or respective owner

Related posts about webgl

Is there a 2d sprite library for webgl?

as seen on Stack Overflow - Search for 'Stack Overflow'
I am looking to build a 2d game using WebGL. I want the hardware acceleration that WebGL provides and I cannot get this from the 2D canvas context in the canvas tag. With that said, is there a tutorial on creating 2D sprites using webGL? Or, better yet, is there a 2D sprite library for WebGL? … >>> More
How do I enable WebGL sites with Firefox 4 Beta?

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I am using Firefox 4.0b12 from the Mozilla Team's "Firefox Next" PPA. My about:config has webgl.enabled_for_all_sites set to true as most guides recommend that and also say that is all that is needed. It doesn't work for me. The main Mozilla Demos page ("Web O' Wonder") gives me: Unfortunately… >>> More
How can I reduce draw calls when using glBufferSubData and DYNAMIC_DRAW?

as seen on Game Development - Search for 'Game Development'
At first I had the problem where I had about 150 rectangles rendered every tick. I only used STATIC_DRAW and glBufferData. I added support for DYNAMIC_DRAW and glBufferSubData and now I have a very good result... but the number of draw calls (glDrawArrays) is the same. Best practices from Mozilla… >>> More
High CPU Usage with WebGL?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm checking out the nightly builds of Firefox and Chromium with support of WebGL with a few demos and tutorials and I can't help but wonder about the extremely high CPU load they cause. A simple demo like this one runs at a sustained 60% of my dual core. The large version of this one maxes out the… >>> More
Render text on canvas using WebGL

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I want to render some text on a canvas using WebGL, which API of WebGL should be used? Note: "text" can be either plain text or HTML snippet with CSS style >>> More

Related posts about three.js

Three.js Collada import animation not working

as seen on Game Development - Search for 'Game Development'
I've been trying to export a Collada animated model to three js. Here is the model: http://bayesianconspiracy.com/files/model.dae It is imported properly(I can see the model) but I can't get it to animate. I've been using the two Collada examples that come with Three js. I've tried just replacing… >>> More
mouse to Three.js world coordinates during TrackballControls

as seen on Stack Overflow - Search for 'Stack Overflow'
I know there are a lot of answers how to translate the mouse coordinates to the Three.js world coordinates (I prefere this one). But I have troubles on calculating when using TrackballControls. First what I expect to do: I want to add a zoom function to my scene. Not by the mouse wheel, the user… >>> More
Multiple .obj Models in THREE.js and detecting clicked objects

as seen on Stack Overflow - Search for 'Stack Overflow'
I have been following along this example to load .obj Model using three.js. Since I needed more than one model to load so I tried this loader.addEventListener( 'load', function ( event ) { var object = event.content; object.position.y = - 80; scene.add( object ); }); loader.load( 'obj/model1.obj'… >>> More
Three.js: texture to datatexture

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to implement a delayed webcam viewer in javascript, using Three.js for WebGL capabilities. I need to store frames grabbed from webcam, so they can be shown after some time (some milliseconds to some seconds). I'm able to do this without Three.js, using canvas and getImageData(). You can… >>> More
Collision Detection and Resolution in Three.js

as seen on Game Development - Search for 'Game Development'
So at the moment am making a simple game using three.js and three.firstpersonControls.js but with the current Three.js r66, they apparently removed checkWallCollision and then in the r67 firstpersonControls removed support for that collision. SO my question is how would i go about checking collision… >>> More