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

Question

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?

Juan Mellado · Accepted Answer · 2012-06-24 09:10:48Z

2

The shape starts at (20, 20), goes to (150, 20) and then "jumps" back to (20, 20).

Avoid jumping, try this shape definition instead:

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

answered Jun 24, 2012 at 9:10

Juan Mellado

15.2k5 gold badges50 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related