How to use the Path function from three
Find comprehensive JavaScript three.Path code examples handpicked from public code repositorys.
GitHub: alibaba/Trescope
![alibaba profile picture](/alibaba.png?size=40)
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);
+ 3 other calls in file
GitHub: Holograf/Holograf
![Holograf profile picture](/Holograf.png?size=40)
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
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
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
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);
GitHub: anvaka/actg
![anvaka profile picture](/anvaka.png?size=40)
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
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
GitHub: dunkelstern/3dmap
![dunkelstern profile picture](/dunkelstern.png?size=40)
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
GitHub: P79N6A/cy3d
![P79N6A profile picture](/P79N6A.png?size=40)
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
three.Vector3 is the most popular function in three (22341 examples)