Home

Index

How to use the Path function from three

Find comprehensive JavaScript three.Path code examples handpicked from public code repositorys.

extrudeSVG.js

27
28
29
30
31
32
33
34
35
36

class XZPathCurve extends THREE.Curve {
    constructor(y = 0) {
        super();
        this.y = 0;//TODO
        this.core = new THREE.Path();
    }

    fromPoints(vectors) {
        this.core.fromPoints(vectors);

132

+ 3 other calls in file

Selection.js

GitHub: Holograf/Holograf

13
14
15
16
17
18
19
20
21
22
  100, 100,         // xRadius, yRadius
  0,  2 * Math.PI,  // aStartAngle, aEndAngle
  false             // aClockwise
);

var path = new THREE.Path( curve.getPoints( 6 ) );
var geometry = path.createPointsGeometry( 6 );
var material = new THREE.LineBasicMaterial( { color : constants.color.selection , transparent: true, opacity: 0} );

// Create the final Object3d to add to the scene

+ 3 other calls in file

splinesManager.js

GitHub: mlknz/three-splineCurveHelper2d

37
38
39
40
41
42
43
44
45
46
createSpline(e) {
    const curveSegmentsAmount = e.detail.nextCurveSegmentsAmount || this.defaultCurveSegmentsAmount;
    const splineCoords = e.detail.points || this.defaultSplinePoints.slice();

    const curve = new THREE.SplineCurve(splineCoords);
    const path = new THREE.Path(curve.getPoints(curveSegmentsAmount));
    const geometry = path.createPointsGeometry(curveSegmentsAmount);
    const splineMesh = new THREE.Line(geometry, lineMaterial);
    splineMesh.rotation.x = Math.PI / 2;
    splineMesh.position.y = 0.0003;

+ 7 other calls in file

main.js

GitHub: AmanSachan1/Procedural-Wing

11
12
13
14
15
16
17
18
19
20
     new THREE.Vector2( 1, 0 ),
     new THREE.Vector2( -0.5, -0.6 ),
     new THREE.Vector2( -2, 0 ),
     new THREE.Vector2( -2.5, 0 )
   ] );
var PathLayer1 = new THREE.Path(curve.getPoints(50)); //50 is the numberOfFeathers initially
var splineGeom = PathLayer1.createPointsGeometry(50);
var featherMesh = new THREE.Mesh();
var featherGeo = new THREE.Geometry();
var oldNum = 50;

+ 7 other calls in file

coins.js

GitHub: aMoniker/coins-visualization

67
68
69
70
71
72
73
74
75
76
// create the "0" mesh
let zeroShape = new THREE.Shape();
zeroShape.moveTo(0, 4);
zeroShape.bezierCurveTo(4, 4, 4, -4, 0, -4);
zeroShape.bezierCurveTo(-4, -4, -4, 4, 0, 4);
let zeroHole = new THREE.Path();
zeroHole.moveTo(0, 2.5);
zeroHole.bezierCurveTo(-2.5, 2.5, -2.5, -2.5, 0, -2.5);
zeroHole.bezierCurveTo(2.5, -2.5, 2.5, 2.5, 0, 2.5);
zeroShape.holes.push(zeroHole);

fontUtils.js

GitHub: anvaka/actg

72
73
74
75
76
77
78
79
80

var fontPaths = [];

for (i = 0; i < length; i++) {

  var path = new THREE.Path();

  var ret = this.extractGlyphPoints(chars[i], face, scale, offset, path);
  offset += ret.offset;

+ 3 other calls in file

blueprint3d.js

GitHub: 2022-SMHRD-IS-AI1/MyPlace

13052
13053
13054
13055
13056
13057
13058
13059
13060
    new THREE.Vector3(max.x, min.y, 0),
    new THREE.Vector3(max.x, max.y, 0),
    new THREE.Vector3(min.x, max.y, 0)
  ];

  shape.holes.push(new THREE.Path(holePoints));
});

var geometry = new THREE.ShapeGeometry(shape);

+ 13 other calls in file

main.js

GitHub: dunkelstern/3dmap

58
59
60
61
62
63
64
65
66
67
    }
}

// and has a number of holes (interior rings)
for (ring of polygon.interiorRings) {
    const hole = new THREE.Path();
    for (point of ring) {
        if (point === ring[0]) {
            hole.moveTo(point.x, point.y);
        } else {

+ 3 other calls in file

segment.js

GitHub: P79N6A/cy3d

158
159
160
161
162
163
164
165
166
167
        this.objArray.push(sphere)
        pointArr.push(new THREE.Vector2(posInfo.x, posInfo.y))
})

const curve = new THREE.SplineCurve(pointArr)
const path = new THREE.Path(curve.getPoints(5000))
const lineGeometry = path.createPointsGeometry(5000)
const lineMaterial = new THREE.LineBasicMaterial({
        color: colors[item.value.index%colors.length],
        transparent: true,

+ 3 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About