need to move/shuffle objects automatically from time to time like the image, if anyone has a solution plz help me
this is glb tin.glb
this is my code
`<head>
<title> 3D model example</title>
<meta charset="utf-8" />
<style>
body {
margin: 0;
}
</style>
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.set(0, 2, -3);
// camera.rotation.y = Math.PI / 1.3;
clock = new THREE.Clock();
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xbbbbff, 0x444422);
light.position.set(0, 1, 0);
scene.add(light);
// model
var loader = new THREE.GLTFLoader();
loader.load('obj/tin2.glb', function(gltf) {
const model = gltf.scene;
const animations = gltf.animations;
model.position.set(1, .75, 0);
model.scale.set(1.75, 1.75, 1.75);
// model.rotation.y = Math.PI / 1.3;
mixer = new THREE.AnimationMixer(model);
// play the first animation
console.log(animations);
const action = mixer.clipAction(animations[0]);
action.play();
scene.add(model);
});
loader.load('obj/tin2.glb', function setupScene2(gltf) {
const model = gltf.scene;
const animations = gltf.animations;
model.position.set(0, .5, 0);
model.scale.set(2, 2, 2);
// model.rotation.y = Math.PI / 1.3;
controls.noPan = true;
// controls.maxDistance = controls.minDistance = yourfixeddistnace;
controls.noKeys = true;
controls.noRotate = true;
controls.noZoom = true;
mixerone = new THREE.AnimationMixer(model);
// play the first animation
console.log(animations);
const action = mixerone.clipAction(animations[0]);
action.play();
scene.add(model);
});
// obj3
var loader = new THREE.GLTFLoader();
loader.load('obj/tin2.glb', function(gltf) {
const model = gltf.scene;
const animations = gltf.animations;
model.position.set(-1, .75, 0);
model.scale.set(1.75, 1.75, 1.75);
// model.rotation.y = Math.PI / 1.3;
mixertwo = new THREE.AnimationMixer(model);
// play the first animation
console.log(animations);
const action = mixertwo.clipAction(animations[0]);
action.play();
scene.add(model);
});
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.domElement.id = 'id-one';
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
var controls = new THREE.OrbitControls(camera);
controls.target.set(0, 1, 0);
controls.update();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
if (mixer) mixer.update(delta);
if (mixerone) mixerone.update(delta);
if (mixertwo) mixertwo.update(delta);
renderer.render(scene, camera);
}`