改为使用three.js 实现更好的 3D效果

index.html

@@ -11,7 +11,6 @@
     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/controls/OrbitControls.js"></script>
 <style>
         @keyframes float {
             0%, 100% { transform: translateY(0px); }
@@ -29,12 +28,13 @@
             border: 1px solid rgba(255, 255, 255, 0.2);
         }
         .perspective-3d {
-            perspective: none;
+            perspective: 1000px;
         }
         #threejs-container {
             width: 100%;
             height: 384px;
-            background: transparent;
+            border-radius: 0.75rem;
+            overflow: hidden;
         }
 </style>
 </head>
@@ -123,18 +123,16 @@
                             <button onclick="changeView('angle')" class="view-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 transition-colors">Angle</button>
                         </div>
                     </div>
-                    <div class="perspective-3d flex justify-center items-center relative">
-                        <div id="threejs-container"></div>
-                        
-                        <!-- Stage Indicators -->
-                        <div class="absolute bottom-4 left-4 flex space-x-2">
-                            <button onclick="setSwingStage('address')" class="stage-btn px-3 py-1 rounded bg-green-600 text-white text-sm">Address</button>
-                            <button onclick="setSwingStage('backswing')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Backswing</button>
-                            <button onclick="setSwingStage('top')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Top</button>
-                            <button onclick="setSwingStage('downswing')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Downswing</button>
-                            <button onclick="setSwingStage('impact')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Impact</button>
-                            <button onclick="setSwingStage('follow')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Follow</button>
-                        </div>
+                    <div id="threejs-container"></div>
+                    
+                    <!-- Stage Indicators -->
+                    <div class="mt-4 flex space-x-2">
+                        <button onclick="setSwingStage('address')" class="stage-btn px-3 py-1 rounded bg-green-600 text-white text-sm">Address</button>
+                        <button onclick="setSwingStage('backswing')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Backswing</button>
+                        <button onclick="setSwingStage('top')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Top</button>
+                        <button onclick="setSwingStage('downswing')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Downswing</button>
+                        <button onclick="setSwingStage('impact')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Impact</button>
+                        <button onclick="setSwingStage('follow')" class="stage-btn px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm">Follow</button>
                     </div>
 </div>
 
@@ -398,211 +396,238 @@
                 }
             }
         });
-        // Three.js Variables
-        let scene, camera, renderer, controls;
-        let skeleton, golfClub;
+        // Three.js Setup
+        let scene, camera, renderer, skeleton, golfClub;
         let currentStage = 'address';
-
-        // Initialize Three.js
+        
         function initThreeJS() {
             const container = document.getElementById('threejs-container');
+            const width = container.clientWidth;
+            const height = container.clientHeight;
             
             // Scene
             scene = new THREE.Scene();
-            scene.background = null;
-            scene.fog = new THREE.Fog(0x000000, 1, 1000);
+            scene.background = new THREE.Color(0x1a1a2e);
+            scene.fog = new THREE.Fog(0x1a1a2e, 1, 1000);
             
             // Camera
-            camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
-            camera.position.set(0, 50, 100);
+            camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+            camera.position.set(0, 5, 15);
+            camera.lookAt(0, 5, 0);
             
             // Renderer
-            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-            renderer.setSize(container.clientWidth, container.clientHeight);
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(width, height);
             renderer.shadowMap.enabled = true;
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             container.appendChild(renderer.domElement);
             
-            // Controls
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
-            controls.enableDamping = true;
-            controls.dampingFactor = 0.05;
-            
             // Lighting
-            const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+            const ambientLight = new THREE.AmbientLight(0x404040, 2);
             scene.add(ambientLight);
             
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-            directionalLight.position.set(50, 50, 50);
+            directionalLight.position.set(5, 10, 5);
             directionalLight.castShadow = true;
+            directionalLight.shadow.camera.near = 0.1;
+            directionalLight.shadow.camera.far = 50;
+            directionalLight.shadow.camera.left = -10;
+            directionalLight.shadow.camera.right = 10;
+            directionalLight.shadow.camera.top = 10;
+            directionalLight.shadow.camera.bottom = -10;
             scene.add(directionalLight);
             
-            const pointLight = new THREE.PointLight(0x4ade80, 0.8, 100);
-            pointLight.position.set(0, 50, 0);
+            const pointLight = new THREE.PointLight(0x4ade80, 1, 100);
+            pointLight.position.set(0, 8, 0);
             scene.add(pointLight);
             
+            // Ground
+            const groundGeometry = new THREE.PlaneGeometry(50, 50);
+            const groundMaterial = new THREE.MeshStandardMaterial({ 
+                color: 0x2a2a3e,
+                roughness: 0.8,
+                metalness: 0.2
+            });
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            ground.rotation.x = -Math.PI / 2;
+            ground.receiveShadow = true;
+            scene.add(ground);
+            
             // Create Skeleton
             createSkeleton();
             
-            // Handle resize
-            window.addEventListener('resize', onWindowResize);
+            // Create Golf Club
+            createGolfClub();
             
-            // Start animation loop
+            // Animation Loop
             animate();
+            
+            // Handle Resize
+            window.addEventListener('resize', onWindowResize);
         }
         
         function createSkeleton() {
             skeleton = new THREE.Group();
             
-            // Joints (spheres)
-            const jointGeometry = new THREE.SphereGeometry(2, 16, 16);
-            const jointMaterial = new THREE.MeshPhongMaterial({ 
-                color: 0x22c55e,
+            // Joint material
+            const jointMaterial = new THREE.MeshPhongMaterial({
+                color: 0x4ade80,
                 emissive: 0x22c55e,
-                emissiveIntensity: 0.3
+                emissiveIntensity: 0.3,
+                shininess: 100
             });
             
-            // Create joints for spine
-            const spineJoints = [];
-            for (let i = 0; i < 5; i++) {
-                const joint = new THREE.Mesh(jointGeometry, jointMaterial);
-                joint.position.set(0, 40 - i * 15, 0);
-                skeleton.add(joint);
-                spineJoints.push(joint);
-            }
-            
-            // Shoulder joints
-            const leftShoulder = new THREE.Mesh(jointGeometry, jointMaterial);
-            leftShoulder.position.set(-15, 25, 0);
-                skeleton.add(leftShoulder);
-            
-            const rightShoulder = new THREE.Mesh(jointGeometry, jointMaterial);
-                rightShoulder.position.set(15, 25, 0);
-                skeleton.add(rightShoulder);
-            
-            // Bones (cylinders)
-            const boneMaterial = new THREE.MeshPhongMaterial({ 
-                color: 0x4ade80,
+            // Bone material
+            const boneMaterial = new THREE.MeshPhongMaterial({
+                color: 0x22c55e,
                 emissive: 0x4ade80,
-                emissiveIntensity: 0.2
+                emissiveIntensity: 0.1,
+                shininess: 50
             });
             
-            // Connect spine joints
-            for (let i = 0; i < spineJoints.length - 1; i++) {
-                const bone = createBone(spineJoints[i].position, spineJoints[i + 1].position);
-                skeleton.add(bone);
-            }
-            
-            // Arms
-            const leftArmBone = createBone(new THREE.Vector3(0, 25, 0), new THREE.Vector3(-15, 25, 0));
-                skeleton.add(bone);
-            
-            const rightArmBone = createBone(new THREE.Vector3(0, 25, 0), new THREE.Vector3(15, 25, 0));
-                skeleton.add(bone);
-            
-            // Create Golf Club
-            createGolfClub();
-            
-            scene.add(skeleton);
-        }
-        
-        function createBone(start, end) {
-            const direction = new THREE.Vector3().subVectors(end, start);
-            const length = direction.length();
-            
-            const boneGeometry = new THREE.CylinderGeometry(0.5, 0.5, length, 8);
-            const bone = new THREE.Mesh(boneGeometry, new THREE.MeshPhongMaterial({ 
-                color: 0x4ade80,
-                emissive: 0x4ade80,
-                emissiveIntensity: 0.1
+            // Create joints and bones
+            const joints = [
+                { x: 0, y: 8, z: 0 },    // Head
+                { x: 0, y: 6, z: 0 },    // Neck
+                { x: 0, y: 4, z: 0 },    // Chest
+                { x: 0, y: 2, z: 0 },    // Waist
+                { x: 0, y: 0, z: 0 },    // Hips
+                { x: -1.5, y: 6, z: 0 },  // Left Shoulder
+                { x: 1.5, y: 6, z: 0 }    // Right Shoulder
+            ];
+            
+            // Add joints
+            joints.forEach(pos => {
+                const jointGeometry = new THREE.SphereGeometry(0.2, 16, 16);
+                const joint = new THREE.Mesh(jointGeometry, jointMaterial);
+                joint.position.set(pos.x, pos.y, pos.z);
+                joint.castShadow = true;
+                skeleton.add(joint);
             });
             
-            // Position and orient the bone
-            bone.position.copy(start).add(direction.multiplyScalar(0.5));
-            bone.lookAt(end);
-            bone.rotateX(Math.PI / 2);
+            // Add bones
+            const bones = [
+                { start: 0, end: 1 }, // Head to Neck
+                { start: 1, end: 2 }, // Neck to Chest
+                { start: 2, end: 3 }, // Chest to Waist
+                { start: 3, end: 4 }, // Waist to Hips
+                { start: 1, end: 5 }, // Neck to Left Shoulder
+                { start: 1, end: 6 }  // Neck to Right Shoulder
+            ];
+            
+            bones.forEach(bone => {
+                const start = joints[bone.start];
+                const end = joints[bone.end];
+                const length = Math.sqrt(
+                    Math.pow(end.x - start.x, 2) + 
+                    Math.pow(end.y - start.y, 2) + 
+                    Math.pow(end.z - start.z, 2)
+                );
+                
+                const boneGeometry = new THREE.CylinderGeometry(0.1, 0.1, length, 8);
+                const boneMesh = new THREE.Mesh(boneGeometry, boneMaterial);
+                
+                // Position and rotate bone
+                const midX = (start.x + end.x) / 2;
+                const midY = (start.y + end.y) / 2;
+                const midZ = (start.z + end.z) / 2;
+                boneMesh.position.set(midX, midY, midZ);
+                
+                // Calculate rotation
+                const direction = new THREE.Vector3(
+                    end.x - start.x,
+                    end.y - start.y,
+                    end.z - start.z
+                ).normalize();
+                boneMesh.lookAt(
+                    new THREE.Vector3(midX, midY, midZ).add(direction)
+                );
+                boneMesh.rotateX(Math.PI / 2);
+                
+                boneMesh.castShadow = true;
+                skeleton.add(boneMesh);
+            });
             
-            return bone;
+            scene.add(skeleton);
         }
         
         function createGolfClub() {
             golfClub = new THREE.Group();
             
             // Club shaft
-            const shaftGeometry = new THREE.CylinderGeometry(0.3, 0.3, 80, 8);
-            const shaftMaterial = new THREE.MeshPhongMaterial({ 
-                color: 0x475569
+            const shaftGeometry = new THREE.CylinderGeometry(0.05, 0.05, 6, 8);
+            const shaftMaterial = new THREE.MeshPhongMaterial({
+                color: 0x94a3b8,
+                emissive: 0x475569,
+                emissiveIntensity: 0.1,
+                shininess: 100
             });
             const shaft = new THREE.Mesh(shaftGeometry, shaftMaterial);
-            shaft.position.set(0, 0, 40);
-            shaft.rotateX(Math.PI / 2);
-            golfClub.add(shaft);
+            shaft.position.set(2, 6, 0);
+            shaft.rotation.z = Math.PI / 6;
+            shaft.castShadow = true;
             
             // Club head
-            const headGeometry = new THREE.BoxGeometry(6, 4, 3);
-            const headMaterial = new THREE.MeshPhongMaterial({ 
-                color: 0xf59e0b,
-                metalness: 0.8,
-                roughness: 0.2
+            const headGeometry = new THREE.BoxGeometry(0.4, 0.3, 0.2);
+            const headMaterial = new THREE.MeshPhongMaterial({
+                color: 0xfbbf24,
+                emissive: 0xf59e0b,
+                emissiveIntensity: 0.2,
+                shininess: 150
             });
             const head = new THREE.Mesh(headGeometry, headMaterial);
-            head.position.set(0, 0, 80);
-            golfClub.add(head);
+            head.position.set(2, 3.2, 0);
+            head.rotation.z = Math.PI / 6;
+            head.castShadow = true;
             
-            // Position golf club at right shoulder
-            golfClub.position.set(15, 25, 0);
-            golfClub.rotation.y = Math.PI / 2;
-            
-            skeleton.add(golfClub);
-        }
-        
-        function onWindowResize() {
-            const container = document.getElementById('threejs-container');
-            camera.aspect = container.clientWidth / container.clientHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(container.clientWidth, container.clientHeight);
+            golfClub.add(shaft);
+            golfClub.add(head);
+            scene.add(golfClub);
         }
         
         function animate() {
             requestAnimationFrame(animate);
-            controls.update();
             
-            // Add subtle breathing animation
-            if (skeleton) {
-                skeleton.children.forEach((child, index) => {
-                    if (child.isMesh && child.material.emissive) {
-                        child.material.emissiveIntensity = 0.3 + 0.1 * Math.sin(Date.now() * 0.001));
-                }
-            });
+            // Rotate camera around skeleton
+            const time = Date.now() * 0.0005;
+            camera.position.x = Math.cos(time) * 15;
+            camera.position.z = Math.sin(time) * 15;
+            camera.lookAt(0, 5, 0);
             
             renderer.render(scene, camera);
         }
         
+        function onWindowResize() {
+            const container = document.getElementById('threejs-container');
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+            
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+            renderer.setSize(width, height);
+        }
+        
         // 3D Model View Change
         function changeView(view) {
             const buttons = document.querySelectorAll('.view-btn');
-            
             buttons.forEach(btn => btn.classList.remove('bg-green-600'));
             event.target.classList.add('bg-green-600');
             
             switch(view) {
                 case 'front':
-                    camera.position.set(0, 50, 100);
-                    camera.lookAt(0, 0, 0);
+                    camera.position.set(0, 5, 15);
                     break;
                 case 'side':
-                    camera.position.set(100, 50, 0);
-                    camera.lookAt(0, 0, 0);
+                    camera.position.set(15, 5, 0);
                     break;
                 case 'top':
-                    camera.position.set(0, 150, 0);
-                    camera.lookAt(0, 0, 0);
+                    camera.position.set(0, 20, 0);
                     break;
                 case 'angle':
-                    camera.position.set(70, 70, 70);
-                    camera.lookAt(0, 0, 0);
+                    camera.position.set(10, 10, 10);
                     break;
             }
+            camera.lookAt(0, 5, 0);
         }
         
         // Swing Stage Control
@@ -617,28 +642,32 @@
             
             currentStage = stage;
             
-            // Animate skeleton based on stage
-            if (golfClub) {
-                switch(stage) {
-                    case 'address':
-                        golfClub.rotation.x = -Math.PI / 18; // -10 degrees
-                        break;
-                    case 'backswing':
-                        golfClub.rotation.x = -Math.PI / 2; // -90 degrees
-                        break;
-                    case 'top':
-                        golfClub.rotation.x = -Math.PI * 2 / 3; // -120 degrees
-                        break;
-                    case 'downswing':
-                        golfClub.rotation.x = -Math.PI / 6; // -30 degrees
-                        break;
-                    case 'impact':
-                        golfClub.rotation.x = Math.PI / 18; // 10 degrees
-                        break;
-                    case 'follow':
-                        golfClub.rotation.x = Math.PI / 2; // 90 degrees
-                        break;
-                }
+            // Animate golf club based on stage
+            switch(stage) {
+                case 'address':
+                    golfClub.rotation.z = Math.PI / 6;
+                    golfClub.position.set(0, 0, 0);
+                    break;
+                case 'backswing':
+                    golfClub.rotation.z = -Math.PI / 3;
+                    golfClub.position.set(-1, 1, 0);
+                    break;
+                case 'top':
+                    golfClub.rotation.z = -Math.PI / 2;
+                    golfClub.position.set(-2, 2, 0);
+                    break;
+                case 'downswing':
+                    golfClub.rotation.z = Math.PI / 4;
+                    golfClub.position.set(1, 0.5, 0);
+                    break;
+                case 'impact':
+                    golfClub.rotation.z = Math.PI / 8;
+                    golfClub.position.set(2, 0, 0);
+                    break;
+                case 'follow':
+                    golfClub.rotation.z = Math.PI / 2;
+                    golfClub.position.set(2, 3, 0);
+                    break;
             }
         }
 // Video Controls
@@ -654,6 +683,7 @@
         }
         // Add animations on load
         window.addEventListener('load', () => {
+            initThreeJS();
             anime({
                 targets: '.glass-effect',
                 translateY: [50, 0],
@@ -662,9 +692,6 @@
                 duration: 800,
                 easing: 'easeOutQuad'
             });
-            
-            // Initialize Three.js after page load
-            initThreeJS();
         });
 </script>
 </body>