 # Rotating three.JS group

We have a method that adds a shape (Node - Album on Imgur)(that consists of three Meshes) to the scene. Default it’s drawn pointing to the right, but we want to give it a rotation (90°, Pi/2 pointing up, 180°, Pi pointing right and so on). The center point (the two circles) should always be at the same palce, only the triangle should rotate around the center point.

We tried working with Euler rotation and setting the pivot to the center point. Most of the time, rotating the node changes the position, but the x-y coordinates aren’t changed in the group object.

So someone a solution on how we can rotate the node around the center? Below I’ve added the code which we use to add the node to the scene.

``````function drawNode(xcoord, ycoord, rotation){

//Small white circle
const innerCircleGeometry = new THREE.CircleGeometry(1 / 32, 32);
const innerCircle = new THREE.Mesh(innerCircleGeometry, new THREE.MeshBasicMaterial({ color: 0xFFFFFF }));

innerCircle.position.set(xcoord, ycoord, 0);

//Bigger grey circle
const outerCircleGeometry = new THREE.CircleGeometry(1 / 16, 32);
const outerCircle = new THREE.Mesh(outerCircleGeometry, new THREE.MeshBasicMaterial({ color: 0xC4C4C4 }));

outerCircle.position.set(xcoord, ycoord, 0);

//Points of the triangle
const points = [];
points.push(new THREE.Vector3(xcoord, ycoord - 1 / 4, 0));
points.push(new THREE.Vector3(xcoord, ycoord + 1 / 4, 0));
points.push(new THREE.Vector3(xcoord + 1 / 4, ycoord, 0));
points.push(new THREE.Vector3(xcoord, ycoord - 1 / 4, 0));

const geometrytriangle = new THREE.BufferGeometry().setFromPoints(points); //connects the points
const triangle = new THREE.Mesh(geometrytriangle, new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, color: 0x5C5C5C }));

//Set order so triangle is always on the bottom
triangle.renderOrder = 0;
outerCircle.renderOrder = 1;
innerCircle.renderOrder = 2;

const nodeGroup = new THREE.Group();