Home

Index

How to use the Shape function from three

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

three.Shape is a class in the Three.js library that represents a 2D shape defined by a set of connected points.

getDaydreamController.js

GitHub: nfbinteractive/Bear71VR_OpenSource

134
135
136
137
138
139
140
141
142
143
var buttonOffset = 0.009;
var circleHole = makeButtonCircle(middleOfController - buttonOffset);
var circleHole2 = makeButtonCircle(middleOfController + buttonOffset);


var shape = new THREE.Shape(faceplateShapePoints);
shape.holes.push(circleHole);
shape.holes.push(circleHole2);
var shapeGeometry = new THREE.ShapeGeometry(shape);
var rotateMatrix = (new THREE.Matrix4()).makeRotationFromEuler(new THREE.Euler(Math.PI * 0.5, Math.PI, 0));

+ 3 other calls in file

buildings.js

GitHub: dpwoert/CityIO

81
82
83
84
85
86
87
88
89
90
if(pos.length < 1){
        return false;
}

//create shape
var shape = new THREE.Shape(pos);
var extrusionSettings = {
        amount: height,
        //bevelSize: 15,
        bevelEnabled: false,

How does three.Shape work?

The three.Shape class is a part of the Three.js library and represents a 2D shape defined by a set of connected points. The shape can be used to create a 2D path or a 3D geometry object. To create a new three.Shape object, you need to provide an array of three.Vector2 objects that represent the points that define the shape. You can then use the extrude method of the three.Shape object to create a 3D geometry object from the shape. For example, you can create a simple square shape using the following code: javascript Copy code {{{{{{{ const shape = new THREE.Shape(); shape.moveTo(0, 0); shape.lineTo(0, 1); shape.lineTo(1, 1); shape.lineTo(1, 0); shape.lineTo(0, 0); const extrudeSettings = { depth: 0.2, bevelEnabled: false, }; const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings); In this example, we first create a new three.Shape object by calling its constructor. We then define the points that make up the square shape using the moveTo and lineTo methods of the three.Shape object. The moveTo method sets the starting point of the shape to (0, 0), and the lineTo methods define the other points of the square. We then define the settings for the extrusion of the shape using an object literal that contains the depth and bevelEnabled properties. These settings will be used to create a 3D geometry object from the shape using the ExtrudeGeometry class. Finally, we create a new THREE.ExtrudeGeometry object by passing the shape and extrudeSettings objects as arguments to the constructor. Overall, the three.Shape class provides a simple and flexible way to define 2D shapes in Three.js, which can then be used to create 3D geometry objects that can be rendered in a 3D scene.

scene.js

GitHub: ryannjohnson/tutorial-chromebookplaystore-webgl

105
106
107
108
109
110
111
112
113
114
  Math.sin(Math.PI / 4) * this.chromeoriteRadius * this.chromeoriteTail / 4
);
this.chromeoriteSpeedY = (
  Math.cos(Math.PI / 4) * this.chromeoriteRadius * this.chromeoriteTail / 4
);
this.meteoriteShape = new THREE.Shape();
this.meteoriteShape.moveTo(0, 0);
this.meteoriteShape.absarc(0, 0, radius * 2, 0, Math.PI, false);
this.meteoriteShape.lineTo(0, -this.chromeoriteTail * radius);
this.meteoriteShape.lineTo(radius * 2, 0);

extrudeScene.js

GitHub: hicview/hicview-frontend

21
22
23
24
25
26
27
28
29
30
  let pts = []
  for (let i = 0; i < count; i++) {
    let a = 2 * i / count * Math.PI
    pts.push(new THREE.Vector2(Math.cos(a) * radius, Math.sin(a) * radius))
  }
  return new THREE.Shape(pts)
}

class ExtrudeScene {
  constructor (points, matColor, args) {

+ 3 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
const shape = new THREE.Shape();

shape.moveTo(25, 25);
shape.bezierCurveTo(25, 25, 20, 0, 0, 0);
shape.bezierCurveTo(-30, 0, -30, 35, -30, 35);
shape.bezierCurveTo(-30, 55, -10, 77, 25, 95);
shape.bezierCurveTo(60, 77, 80, 55, 80, 35);
shape.bezierCurveTo(80, 35, 80, 0, 50, 0);
shape.bezierCurveTo(35, 0, 25, 25, 25, 25);

In this example, we first create a new three.Shape object by calling its constructor. We then define the points that make up the heart shape using the moveTo and bezierCurveTo methods of the three.Shape object. The moveTo method sets the starting point of the shape to (25, 25), and the bezierCurveTo methods define the other points of the heart shape. Overall, this example demonstrates how to create a three.Shape object that defines a 2D shape using a set of connected points. This shape can then be used to create a 3D geometry object that can be rendered in a 3D scene using Three.js.

line3DModel.js

GitHub: hicview/hicview-frontend

22
23
24
25
26
27
28
29
30
31
for (let i = 0; i < count; i++) {
  let radius = 3
  let a = 2 * i / count * Math.PI
  pts.push(new THREE.Vector2(Math.cos(a) * radius, Math.sin(a) * radius))
}
const default_extrude_shape = new THREE.Shape(pts)

class ExtrudeLine {
  constructor (points, matColor, shape = default_extrude_shape, divisions = 1) {
    let extrude_path = new THREE.CatmullRomCurve3(points)

transformation.js

GitHub: rendoir/feup-thesis

123
124
125
126
127
128
129
130
131
132
// Setup group
let group = new THREE.Group();
group.position.z = i;

// Setup shape, geometry, material and mesh
let shape = new THREE.Shape( state.vertices );
let geometry = new THREE.ShapeBufferGeometry( shape );
geometry.computeBoundingBox();
let mesh = new THREE.Mesh( geometry, 
    new THREE.MeshBasicMaterial( { color: this._getColor(i, states.length), side: THREE.DoubleSide,

+ 3 other calls in file

build-square-room.js

GitHub: KleoPetroff/storyboarder

86
87
88
89
90
91
92
93
94
95
const buildSquareRoom = (w, l, h, { textures }) => {
  var hw = w / 2
  var hl = l / 2

  var scale = 13.2
  var shape = new THREE.Shape()
  shape.moveTo(0, 0)
  shape.lineTo(w / scale, 0)
  shape.lineTo(w / scale, l / scale)
  shape.lineTo(0, l / scale)

263

+ 3 other calls in file

scene.js

GitHub: demo3d/threejs-mapping

49
50
51
52
53
54
55
56
57
58
});

var ex = shapeCoords[0];

if(shapeCoords.length > 3) {
  var shape = new THREE.Shape(shapeCoords);
  var extrusionSettings = {amount: 10, bevelEnabled: false};
  var geometry = new THREE.ExtrudeGeometry(shape, extrusionSettings);
  var material = new THREE.MeshPhongMaterial({color: 0xcccccc});  
  var mesh = new THREE.Mesh(geometry,material );

+ 3 other calls in file

coins.js

GitHub: aMoniker/coins-visualization

40
41
42
43
44
45
46
47
48
49
    this.coinRadius, this.coinRadius, coinThickness, 16
);
cylGeometry.rotateX(Math.PI / 2);

// create the "1" mesh
let oneShape = new THREE.Shape();
oneShape.moveTo(-3, 1);
oneShape.lineTo(-3, 2);
oneShape.bezierCurveTo(-2.75, 1.75, -0.75, 3.5, -1, 4);
oneShape.lineTo(1, 4);

+ 5 other calls in file

meshFactory.js

GitHub: dimroc/nyc_building_perimeters

26
27
28
29
30
31
32
33
34
35
};

MeshFactory.shapeFromPolygon = function(polygon) {
  var hole, shape;

  shape = new THREE.Shape(projectRing(polygon[0]));
  shape.holes = (function() {
    var _i, _len, _ref, _results;

    _ref = polygon.slice(1);

+ 7 other calls in file

blueprint3d.js

GitHub: 2022-SMHRD-IS-AI1/MyPlace

11511
11512
11513
11514
11515
11516
11517
11518
11519
11520
utils.forEach( scope.interiorCorners, function(corner) {
    points.push(new THREE.Vector2(
      corner.x, 
      corner.y));
});
var shape = new THREE.Shape(points);
var geometry = new THREE.ShapeGeometry(shape);
scope.floorPlane = new THREE.Mesh(geometry,
  new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide

+ 69 other calls in file

calculation.js

GitHub: thatbimgirl/api

87
88
89
90
91
92
93
94
95
96
    console.log(x,y,z);
    //bottomPoints.push([x,y]);
  };
}
//const bottomCurve = new THREE.Curve(bottomPoints);
//const bottomShape = new THREE.Shape(bottomCurve);
//var a = THREE.ShapeUtils.area(bottomPoints);
//const unique = [...new Set(bottomPoints.map(item => item))]

//write algorithm to delete duplicates

three-context.js

GitHub: ppalludan/emojione-3d

52
53
54
55
56
57
58
59
60
61
            console.log(shape.curves);
            console.error(ex);
        }
    }

    this.context.shape = new THREE.Shape();
}

translate(x, y) {
    this.context.center.x += x;

+ 3 other calls in file

mammalate.js

GitHub: asutherland/horse-extruder

111
112
113
114
115
116
117
118
119
120
  return ourMatrix;
},


makeEllipseShape: function(hRad, vRad) {
  var shape = new THREE.Shape();
  shape.moveTo(0, vRad);
  shape.quadraticCurveTo(hRad, vRad, hRad, 0);
  shape.quadraticCurveTo(hRad, -vRad, 0, -vRad);
  shape.quadraticCurveTo(-hRad, -vRad, -hRad, 0);

main.js

GitHub: dunkelstern/3dmap

45
46
47
48
49
50
51
52
53
54
    requestAnimationFrame(() => this.renderer.render(this.scene, this.camera));
}

// Create ThreeJS shape from wkx polygon
osmRenderer.prototype.shapeFromPoly = function (polygon) {
    const shape = new THREE.Shape(); // new shape

    // the shape is the exterior ring
    for (point of polygon.exteriorRing) {
        if (point === polygon.exteriorRing[0]) {

+ 3 other calls in file

mesh.js

GitHub: zDawnING/MyLearnWebGL

10
11
12
13
14
15
16
17
18

import starImg from "res_gl/img/lensflare/lensflare0_alpha.png";

export const createCircle = () => {
        // 创建圆
        let circleShape = new THREE.Shape();
        circleShape.absarc( 0, 0, 900, 0, Math.PI * 2, false );

        circleShape.autoClose = true;

svg-renderer.js

GitHub: Lucaszw/device-controller

64
65
66
67
68
69
70
71
72
73
  scene.updateMatrixWorld();
  return {scene, group};
}

const ShapeFromJSONObject = function(JSONObject) {
  const s = _.extend(new THREE.Shape(), JSONObject);
  s.curves = _.map(s.curves, (c) => _.extend(new THREE.LineCurve(), c));
  for (const [i, c] of s.curves.entries()){
    c.v1 = new THREE.Vector2(c.v1.x, c.v1.y);
    c.v2 = new THREE.Vector2(c.v2.x, c.v2.y);

+ 11 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