# Syntax
Here is the syntax for creating groups in three.js: 
```
//initialization
const group = new THREE.Group()
```
Once the group has been initialized, we can add elements to it:
```
group.add(element1)
group.add(element2)
```
Once the objects have been grouped together, they are treated as instances of the `Object3D` base class.




<html>
	<head>
		<title>Three - Remove</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script>

      		// scene
			const scene = new THREE.Scene();

			// camera
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      		camera.position.z = 3;

      		// renderer
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			// light
			const light = new THREE.AmbientLight (0xffffff, 0.5);
			scene.add(light);

      		// shape_one
			const geometry_one = new THREE.BoxGeometry(1, 1, 1);
			const material_one = new THREE.MeshBasicMaterial({color: 0xffff00});
			const shape_one = new THREE.Mesh(geometry_one, material_one);
			scene.add(shape_one);

			// shape_two
			const geometry_two= new THREE.BoxGeometry(1, 1, 1);
			const material_two = new THREE.MeshBasicMaterial({color: 0x00ff00});
			const shape_two = new THREE.Mesh(geometry_two, material_two);
			shape_two.position.x = 2;

			// shape_three
			const geometry_three= new THREE.BoxGeometry(1, 1, 1);
			const material_three = new THREE.MeshBasicMaterial({color: 0x00ff00});
			const shape_three = new THREE.Mesh(geometry_three, material_three);
			shape_three.position.x = -2;
			
			// initalizing a group
			const group = new THREE.Group();

			// adding objects to group
			group.add(shape_one);
			group.add(shape_two);
			group.add(shape_three);

			// populating scene
			scene.add(group);

			function animate() {
				requestAnimationFrame(animate);

				shape_one.rotation.y += 0.01;

				renderer.render(scene, camera);
			};

			animate();
		</script>
	</body>
</html>

codemirror

How to group elements in three.js

Grouping elements in three.js controls them together, simplifying management using THREE.Group() to treat multiple objects as instances of Object3D.

How to group elements in three.js

Syntax

Example

Explanation