To create a 3D car animation that changes color on click, we'll use Three.js (a WebGL library for 3D graphics). Here's a complete, working implementation:

Step-by-Step Explanation:

1. Scene Setup: Create a 3D scene, camera, and renderer.
2. Lighting: Add ambient and directional lights to make the car visible.
3. Car Model: Build a simple car using primitive shapes (box for body/roof, cylinder for wheels).
4. Interaction: Use raycasting to detect clicks on the car and change its color.
5. Animation: Rotate the car to showcase its 3D form.

Complete Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Car Animation</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script>
        // 1. Scene Setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 2. Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 5, 5);
        scene.add(directionalLight);

        // 3. Car Group (to rotate the whole car)
        const carGroup = new THREE.Group();
        scene.add(carGroup);

        // Car Body
        const bodyGeo = new THREE.BoxGeometry(4, 1.5, 2);
        const bodyMat = new THREE.MeshStandardMaterial({ color: 0xff0000 }); // Initial red
        const carBody = new THREE.Mesh(bodyGeo, bodyMat);
        carGroup.add(carBody);

        // Car Roof
        const roofGeo = new THREE.BoxGeometry(2, 1, 2);
        const roofMat = new THREE.MeshStandardMaterial({ color: 0xff0000 });
        const roof = new THREE.Mesh(roofGeo, roofMat);
        roof.position.y = 1.25; // Position above body
        carGroup.add(roof);

        // Wheels (Cylinder geometry)
        function createWheel(x, y, z) {
            const wheelGeo = new THREE.CylinderGeometry(0.5, 0.5, 0.3, 32);
            const wheelMat = new THREE.MeshStandardMaterial({ color: 0x333333 });
            const wheel = new THREE.Mesh(wheelGeo, wheelMat);
            wheel.rotation.z = Math.PI / 2; // Rotate to lie flat
            wheel.position.set(x, y, z);
            return wheel;
        }
        carGroup.add(createWheel(-1.5, -0.75, 1.1)); // Front left
        carGroup.add(createWheel(1.5, -0.75, 1.1));  // Front right
        carGroup.add(createWheel(-1.5, -0.75, -1.1)); // Rear left
        carGroup.add(createWheel(1.5, -0.75, -1.1));  // Rear right

        // Camera Position
        camera.position.z = 10;

        // 4. Click Interaction (Raycasting)
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();

        window.addEventListener('click', (event) => {
            // Convert mouse to normalized coordinates (-1 to 1)
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObjects([carBody, roof]);

            if (intersects.length > 0) {
                // Random color (hex)
                const randomColor = Math.floor(Math.random() * 16777215);
                carBody.material.color.setHex(randomColor);
                roof.material.color.setHex(randomColor);
            }
        });

        // 5. Animation Loop
        function animate() {
            requestAnimationFrame(animate);
            carGroup.rotation.y += 0.01; // Rotate car around Y-axis
            renderer.render(scene, camera);
        }
        animate();

        // Resize Handling
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

How to Use:

1. Save this code as an HTML file (e.g., car-animation.html).
2. Open it in a modern browser (Chrome, Firefox, Edge).
3. Click on the car body or roof to change its color to a random shade.
4. The car will rotate continuously to show its 3D structure.

Key Features:

• 3D Rotation: The car rotates around its Y-axis to highlight its 3D form.
• Color Change: Clicking the car body/roof triggers a random color change.
• Responsive: Adjusts to window size changes.
• Simple Model: Uses basic shapes for easy understanding (can be replaced with complex models later).

This implementation is lightweight and works directly in the browser without any additional tools!

作者声明:本文包含人工智能生成内容。