I’m new to JavaScript and Three.js, nice to meet all of you !

This code is for creating 4 cubes and one arrow. Like this image:

Image1

// Scene
const scene = new THREE.Scene();

// Groups
const cubes = new THREE.Group();

// Ambient Light
const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light)

// Reference Circle or Path
const circle = new THREE.CircleGeometry(5, 100)
const circlePath = new THREE.Path()
const stroke = new THREE.LineBasicMaterial({color : 'white'})
const ref = new THREE.Line(circle, stroke)
scene.add(ref)

// Mesh 
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 'red' })
const mesh = new THREE.Mesh(geometry, material)

// Mesh 2  
const geometry2 = new THREE.BoxGeometry(1, 1, 1)
const material2 = new THREE.MeshBasicMaterial({ color: 'blue' })
const mesh2 = new THREE.Mesh(geometry2, material2)

// // Mesh 3 
const geometry3 = new THREE.BoxGeometry(1, 1, 1)
const material3 = new THREE.MeshBasicMaterial({ color: 'green' })
const mesh3 = new THREE.Mesh(geometry3, material3)

// // Mesh 4 
const geometry4 = new THREE.BoxGeometry(1, 1, 1)
const material4 = new THREE.MeshBasicMaterial({ color: 'purple' })
const mesh4 = new THREE.Mesh(geometry4, material4)

// Mesh 5 Arrow
const geometry5 = new THREE.ConeGeometry(1, 4, 3)
const material5 = new THREE.MeshBasicMaterial({ color: 'yellow' })
const arrow = new THREE.Mesh(geometry5, material5)

scene.add(mesh, mesh2, mesh3, mesh4, arrow)


const axesHelper = new THREE.AxesHelper();
scene.add(axesHelper)

// Camera

const aspect = {
    width: window.innerWidth,
    height: window.innerHeight
}

const camera = new THREE.PerspectiveCamera(75, aspect.width / aspect.height)
camera.position.x = -0.15;
camera.position.z = 10;

scene.add(camera)

// Renderer 
const canvas = document.querySelector('.draw')
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(aspect.width, aspect.height)
renderer.render(scene, camera)

const clock = new THREE.Clock();

const animate = () => {
    const time = clock.getElapsedTime()
    console.log(time);
    const a = time;
    let px;
    let pz;
    let r = 5;

    px = r * Math.cos(a);
    pz = r * Math.sin(a);

    mesh.position.set(px, pz, 0);
    mesh.rotation.x = time * Math.PI * 0.1;
    mesh.rotation.y = time * Math.PI * 0.3;

    mesh2.position.set(px, pz, 0);
    mesh2.rotation.x = time * Math.PI * 0.1;
    mesh2.rotation.y = time * Math.PI * 0.3;
    
    mesh3.position.set(px2, pz, 0);
    mesh3.rotation.x = time * Math.PI * 0.1;
    mesh3.rotation.y = time * Math.PI * 0.3;

    mesh4.position.set(px, pz, 0);
    mesh4.rotation.x = time * Math.PI * 0.1;
    mesh4.rotation.y = time * Math.PI * 0.3;

    arrow.rotation.y = time * Math.PI * 0.7;

    renderer.render(scene, camera)
    window.requestAnimationFrame(animate)
}
animate();

The problem I’m having is that when the animate() loop starts, I have all my geometry overlapped like this:

Image2

Do you have any suggestions on what could solve the overlapping ? Like doing some kind of delay maybe, not sure how to apply it.

What I understood was to create 4 loops for each cube. May be possible I’m not understanding correctly because when the program is running, I get: Image1.

Any suggestions on what could be done to make a delay for each mesh to avoid overlapping ?

Thanks for your time. 🙂