Implementing Unique Rotations for Multiple Objects in Three.js

To create unique rotations for each chocolate object with different directions and speeds, you'll need to assign individual rotation parameters to each object. Here's how you can modify your code to achieve this:

Approach 1: Using Object Properties

You can assign random rotation speeds to each object when initializing your scene:

JAVASCRIPTCopied
// When loading or creating your objects
if (mnmSceneModel !== undefined) {
    for (var i = 0; i < mnmSceneModel.children.length; i++) {
        // Assign random rotation speeds to each axis
        mnmSceneModel.children[i].userData.rotationSpeed = {
            x: Math.random() * 0.01 - 0.005,  // Random value between -0.005 and 0.005
            y: Math.random() * 0.01,          // Random value between 0 and 0.01
            z: Math.random() * 0.01 - 0.005   // Random value between -0.005 and 0.005
        };
    }
}

Then in your animation loop:

JAVASCRIPTCopied
function animate() {
    renderer.render(scene, camera);

    if (mnmSceneModel !== undefined) {
        for (var i = 0; i < mnmSceneModel.children.length; i++) {
            const object = mnmSceneModel.children[i];
            const speed = object.userData.rotationSpeed;
            
            // Apply incremental rotation based on individual speeds
            object.rotation.x += speed.x;
            object.rotation.y += speed.y;
            object.rotation.z += speed.z;
        }
    }

    controls.update();
    requestAnimationFrame(animate);
}

Approach 2: Using Time-Based Rotation

For more varied and natural-looking rotations, you can use trigonometric functions with time:

JAVASCRIPTCopied
// Initialize unique parameters for each object
if (mnmSceneModel !== undefined) {
    for (var i = 0; i < mnmSceneModel.children.length; i++) {
        mnmSceneModel.children[i].userData.rotationParams = {
            xFreq: Math.random() * 0.5 + 0.1,
            yFreq: Math.random() * 0.5 + 0.1,
            zFreq: Math.random() * 0.5 + 0.1,
            xPhase: Math.random() * Math.PI * 2,
            yPhase: Math.random() * Math.PI * 2,
            zPhase: Math.random() * Math.PI * 2
        };
    }
}

// In your animation loop
let clock = new THREE.Clock();

function animate() {
    const time = clock.getElapsedTime();
    renderer.render(scene, camera);

    if (mnmSceneModel !== undefined) {
        for (var i = 0; i < mnmSceneModel.children.length; i++) {
            const object = mnmSceneModel.children[i];
            const params = object.userData.rotationParams;
            
            // Create smooth, varied rotations using sine waves
            object.rotation.x = Math.sin(time * params.xFreq + params.xPhase) * 0.2;
            object.rotation.y = time * params.yFreq * 0.1; // Continuous rotation for y
            object.rotation.z = Math.sin(time * params.zFreq + params.zPhase) * 0.1;
        }
    }

    controls.update();
    requestAnimationFrame(animate);
}

Optimization Tips

1. Use Object3D.userData: Storing rotation parameters in userData keeps them associated with each object.

2. Limit rotation updates: If you have many objects, consider updating rotations less frequently for distant objects.

3. Use requestAnimationFrame: Make sure your animation loop uses requestAnimationFrame for optimal performance.

4. Consider using Quaternions: For complex rotations, Quaternions can be more efficient and avoid gimbal lock issues.

5. Group similar objects: If some chocolates should move similarly, group them to reduce calculation overhead.

This approach will give each chocolate piece its own unique rotation behavior while maintaining good performance.