CODEWITHSUNDEEP
javascriptthree.jswebgl
Mahdi7s
Mahdi7s

Reputation: 833

how to convert a 2d path to a 3d shape in 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?

Upvotes: 4

Views: 2795

Answers (1)

Juan Mellado
Juan Mellado

Reputation: 15113

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

Upvotes: 2

Related Questions