Home

Index

How to use the Group function from three

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

The Group class in Three.js is used to group together objects so that they can be manipulated as a single entity.

Vectors.js

31
32
33
34
35
36
37
38
39
40
const vectors = config.vectors.data;
const origins = config.origins.data;
let colors = (config.colors && config.colors.data) || [];
const useHead = config.use_head;
const headSize = config.head_size;
const object = new THREE.Group();
let origin;
let destination;
let i;
const labelSize = config.label_size;

119

813

+ 3 other calls in file

Scene.js

GitHub: K3D-tools/K3D-jupyter

604
605
606
607
608
609
610
611
612
613

this.scene = new THREE.Scene();
this.gridScene = new THREE.Scene();

this.axesHelper.scene = new THREE.Scene();
this.K3DObjects = new THREE.Group();

[this.keyLight, this.headLight, this.fillLight, this.backLight].forEach((light) => {
    self.camera.add(light);
    self.camera.add(light.target);

116

804

How does three.Group work?

three.Group is a class in the Three.js library that represents a container of objects with a position and orientation, allowing for hierarchical grouping of objects in a 3D scene. When you add objects to a group, the group acts as a parent for them, and you can control the transformation of all the objects within the group by modifying the position and rotation of the group itself.

index.js

GitHub: JackGit/xplan

71
72
73
74
75
76
77
78
79
80
  this.camera.add(createSpotLight())  // fixed light direction by adding it as child of camera
}

_createScene () {
  this.scene = new THREE.Scene()
  this.earthGroup = new THREE.Group()
  this.locationGroup = new THREE.Group()

  this.scene.add(this.earthGroup)
  this.earthGroup.add(this.locationGroup)

280

+ 3 other calls in file

FBXLoader.js

GitHub: sneha-belkhale/AI4Animation-js

123
124
125
126
127
128
129
130
131

        }

};

// Parse the FBXTree object returned by the BinaryParser or TextParser and return a THREE.Group
function FBXTreeParser( textureLoader ) {

        this.textureLoader = textureLoader;

229

+ 21 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import * as THREE from "three";

const group = new THREE.Group();

const mesh1 = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
mesh1.position.set(-1, 0, 0);

const mesh2 = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
mesh2.position.set(1, 0, 0);

group.add(mesh1, mesh2);

In this example, we create a new Group object, and add two Mesh objects to it using the add() method. We can then manipulate the Group as a single object, which will also affect its child objects.

index.js

GitHub: ASSERT-KTH/ci-hackathon

212
213
214
215
216
217
218
219
220
221
    
}

function addLigth(color, position){
    
    group = new THREE.Group();

    var bulbGeometry = new THREE.SphereGeometry(1, boxSize[1]/4, boxSize[1]/4);
    var spotLight = new THREE.SpotLight(Number(color));
    var bulbLight = new THREE.PointLight(Number(color), 0.1);

+ 2 other calls in file

player.js

GitHub: kentywang/Agamari

78
79
80
81
82
83
84
85
86
87

mesh.name = id;
mesh.nickname = initialData.nickname;

// add pivot to attach food to
pivot = new THREE.Group();
mesh.add(pivot);

// add Cannon body
mesh.cannon.position.x = mesh.position.x;

+ 5 other calls in file

index.js

GitHub: nfbinteractive/Bear71VR_OpenSource

40
41
42
43
44
45
46
47
48
49
const color = params.colorNormal.clone();

const ringRadius = 0.15;
const ringGeometry = new THREE.RingGeometry(0.75, 0.6, 6, 1);

this.groundRingMesh = new THREE.Group();

// rotation of quaternion which we'll re-use later
this.groundRingRotationQuaternion = new THREE.Quaternion().setFromAxisAngle(
  new THREE.Vector3(1, 0, 0), -Math.PI / 2

+ 5 other calls in file

index.js

GitHub: OpenSlicer/OpenSlicer

222
223
224
225
226
227
228
229
230
231
if (mainObj === undefined) return
if (currentLayer !== undefined) {
    scene.remove(currentLayer)
}

currentLayer = new THREE.Group()
scene.add(currentLayer)

ensureNoCoplanarVertices()
computeLayerTriangles()

+ 5 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2436
2437
2438
2439
2440
2441
2442
2443
2444
2445

if (meshes.length === 1) {
  return meshes[0];
}

var group = new THREE.Group();

for (var i = 0, il = meshes.length; i < il; i++) {
  group.add(meshes[i]);
}

+ 29 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

3365
3366
3367
3368
3369
3370
3371
3372
3373

    return meshes[ 0 ];

}

const group = new THREE.Group();
parser.associations.set( group, {
    meshes: meshIndex
} );

+ 5 other calls in file

index.cjs

GitHub: Brakebein/node-three-gltf

2124
2125
2126
2127
2128
2129
2130
2131
2132
2133
    });
}
if (meshes.length === 1) {
    return meshes[0];
}
const group = new three.Group();
parser.associations.set(group, { meshes: meshIndex });
for (let i = 0, il = meshes.length; i < il; i++) {
    group.add(meshes[i]);
}

+ 2 other calls in file

t.js

GitHub: 52black/scratch-vm

1210
1211
1212
1213
1214
1215
1216
1217
1218

}

state.finalize();

var container = new THREE.Group();
container.materialLibraries = [].concat( state.materialLibraries );

for ( var i = 0, l = state.objects.length; i < l; i ++ ) {

+ 18 other calls in file

boid.js

GitHub: juanuys/boids

58
59
60
61
62
63
64
65
66
67

var geometry = new THREE.ConeGeometry(5, 10, 8)
// rotate the geometry, because the face used by lookAt is not the cone's "tip"
geometry.rotateX(THREE.Math.degToRad(90));

var mesh = new THREE.Group();
var lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 });
var meshMaterial = new THREE.MeshPhongMaterial({ color, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true });
mesh.add(new THREE.LineSegments(new THREE.WireframeGeometry(geometry), lineMaterial));
mesh.add(new THREE.Mesh(geometry, meshMaterial));

+ 3 other calls in file

box.js

GitHub: juanuys/boids

1
2
3
4
5
6
7
8
9
10
11
12


export default class Box {
  constructor(width = 100, height = 100, depth = 100, color = 0xffffff) {
      const geometry = new THREE.BoxGeometry(width, height, depth, 1, 1, 1);


      this.mesh = new THREE.Group();
      var lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.05 });
      const meshMaterial = new THREE.MeshLambertMaterial({
          color,
          transparent: true,

region.js

GitHub: alan-wu/ZincJS

-1

spotlightview.js

GitHub: audunsh/evince

375
376
377
378
379
380
381
382
383
384




const atoms = new THREE.Group();
const bonds = new THREE.Group();

for (let i = 0; i < this.pos.length; i++) {
    // aCurve.push(this.pos[i][0], this.pos[i][1], this.pos[i][2]);
    //aColor.push(.3 + .001*this.colors[i][0], .3+ .001*this.colors[i][1], .3+ .001*this.colors[i][2]);

+ 3 other calls in file

ArcballControls.js

GitHub: BaurTokenov/three-js-editor-2

1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
this._startCursorPosition = new three_1.Vector3();
//grid
this._grid = null; //grid to be visualized during pan operation
this._gridPosition = new three_1.Vector3();
//gizmos
this._gizmos = new three_1.Group();
this._curvePts = 128;
//animations
this._timeStart = -1; //initial time
this._animationId = -1;

builder.js

GitHub: TimMerino1710/Minecraft-Interactive-Evolution

202
203
204
205
206
207
208
209
210
211
//get the structure properties
let structDim = [arr3d.length, arr3d[0].length, arr3d[0][0].length]; //w,h,d
let structCen = [structDim[0]/2, structDim[1]/2, structDim[2]/2]; //x,y,z

//build the structure
let structObj = new THREE.Group();
for(let i = 0; i < arr3d.length; i++){
    for(let j = 0; j < arr3d[i].length; j++){
        for(let k = 0; k < arr3d[i][j].length; k++){
            if(CUR_TEXTURE_LIST[arr3d[i][j][k]] != "air"){

+ 3 other calls in file

World.js

GitHub: KleoPetroff/storyboarder

183
184
185
186
187
188
189
190
191
192
const useEnvironmentModel = (world, scene, { modelData}) => {
  const [group, setGroup] = useState(null)

  useEffect(() => {
    if (modelData) {
      let g = new THREE.Group()

      let sceneData = onlyOfTypes(modelData.scene.clone(), ['Scene', 'Mesh', 'Group'])

      // update all Mesh textures

263

ThreeDPenSkin.js

GitHub: CSDTs/CScratch-3d-render

10
11
12
13
14
15
16
17
18
     * @private
     * @type {RenderWebGL}
     */
    this._renderer = renderer;

    this._group = new three.Group();

    this.is3D = true;
}

304

+ 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