Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

three.js
animation
graphics
webgl
grouping

How to group elements in three.js

Omer Kamran

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Three.js is a JavaScript library that renders graphics on the web using WebGL.

Grouping elements in three.js provides a set of properties to control the elements in a group. This technique also makes it syntactically easier to manage them at once.

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.

Example

Here is an example of creating a group in three.js:

Explanation

The code above demonstrates the use of THREE.Group(). We start by creating a scene in three.js.

  • Line 47: We initialize a Group.
  • Lines 50–52: We add the objects to the group.
  • Line 55: We populate the scene with the group.

RELATED TAGS

three.js
animation
graphics
webgl
grouping

CONTRIBUTOR

Omer Kamran
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring