Hi
How to draw the trajectory of a moving sphere in three js?
is this what you Want:
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0077ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
// Create a geometry for the trajectory
const trajectoryPoints = [];
const trajectoryGeometry = new THREE.BufferGeometry().setFromPoints(trajectoryPoints);
const trajectoryMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
const trajectoryLine = new THREE.Line(trajectoryGeometry, trajectoryMaterial);
scene.add(trajectoryLine);
let time = 0;
function animate() {
requestAnimationFrame(animate);
// Update sphere position
const radius = 20;
const speed = 0.05;
sphere.position.x = radius * Math.cos(time);
sphere.position.y = radius * Math.sin(time);
time += speed;
// Update trajectory
trajectoryPoints.push(sphere.position.clone());
trajectoryGeometry.setFromPoints(trajectoryPoints);
// Render the scene
renderer.render(scene, camera);
}
animate();
Keep in mind position of camera
, because when OP will implement your code, he will see black screen…
camera.position.z = 40; // ~
Yes ,That 's Right
Thank you i will try