Positioning an object around a circle looking at the center

Questions
1

Hi all, I’m in trouble with a problem. I want to dispose some object, for example some cone, or triangle around a circle, but i want that the tip of the cone point always to the center.

I modified a code that i found:
In this code the cones turn around the circle but they don’t point to the center.

Instead I want some like this:

wexp
wexp1102×685 3.93 KB

The code:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var circles = [];

for (let i = 0; i < 4; i++) {
  setCircle()
}

function setCircle() {
  let c = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1, 8), new THREE.MeshBasicMaterial({
    color: "white"
  }));
  scene.add(c);
  circles.push(c);
}

var clock = new THREE.Clock();
var time = 0;
var radius = 2;

renderer.setAnimationLoop(() => {
  time = clock.getElapsedTime() * 0.1 * Math.PI;
  circles.forEach((c, ndx) => {
    c.position.set(
      Math.cos(time + Math.PI * 0.5 * ndx) * radius,
      Math.sin(time + Math.PI * 0.5 * ndx) * radius,
      0
    )
  })

  renderer.render(scene, camera)
});

Can you help me please?

2

Hi!
Approach #1 : align the cone geometry along Z-axis and use .lookAt(0, 0, 0) for each mesh

Approach #2 : rotate each mesh on Z-axis

3

Approach #3 : Add to group, rotate group
Example : https://jsfiddle.net/seanwasere/Lzg1knjv/
image

1 Like
4

Approach #4: Merge geometries

1 Like
5

Approach #5: use InstancedMesh and quaternions (not a single cosine was explicitly harmed during this exercise) :popcorn:

2 Likes
6

Thank you to all. It’s very helpfull :wink:

7

Approach #6: React Three Fiber

1 Like