Positioning an object around a circle looking at the center

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:

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);

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"
}));
circles.push(c);
}

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

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)
});
``````

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

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

1 Like

Approach #4: Merge geometries

1 Like

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

2 Likes

Thank you to all. It’s very helpfull

Approach #6: React Three Fiber

1 Like