Greetings fellow developers! I'm excited to delve into JavaScript and Three.js with all of you.
Below is the code snippet for creating 4 cubes and an arrow, resembling the image found here:
// 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();
I'm facing an issue where all my geometries overlap as seen in this image:
Do you have any suggestions on how to prevent overlapping? Perhaps implementing some sort of delay could help, but I'm not certain on how to integrate it.
Based on my understanding, creating separate loops for each cube might resolve the issue, but currently, it displays like this: Image1.
If you have any advice on introducing delays for each mesh to avoid overlap, please share your insights.
Thank you for your valuable input. :)