<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D Christmas Tree</title><script src="https://cdn.jsdelivr.net/npm/three@0.140.1/build/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.140.1/examples/js/controls/OrbitControls.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script><style>body {margin: 0;overflow: hidden;background-color: #1a1a2e;}#info {position: absolute;top: 10px;left: 10px;color: white;font-family: Arial, sans-serif;z-index: 100;}</style>
</head>
<body><div id="info"><p>Click and drag to rotate the scene</p><p>Scroll to zoom in/out</p></div><script>// Scene setupconst 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);renderer.setClearColor(0x1a1a2e);document.body.appendChild(renderer.domElement);// Controlsconst controls = new THREE.OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.05;camera.position.set(0, 5, 15);// Snow groundconst groundGeometry = new THREE.PlaneGeometry(100, 100);const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff,roughness: 0.8,metalness: 0.2});const ground = new THREE.Mesh(groundGeometry, groundMaterial);ground.rotation.x = -Math.PI / 2;ground.position.y = -0.5;scene.add(ground);// Christmas tree (Pixar style)function createChristmasTree() {const treeGroup = new THREE.Group();// Tree trunkconst trunkGeometry = new THREE.CylinderGeometry(0.5, 0.7, 2, 16);const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513,roughness: 0.9,metalness: 0.1});const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);trunk.position.y = 1;treeGroup.add(trunk);// Tree leaves (conical sections with rounded edges for Pixar style)const leafColors = [0x006400, 0x228B22, 0x32CD32];for (let i = 0; i < 5; i++) {const radius = 2.5 - i * 0.4;const height = 2 - i * 0.3;const segments = 32;// Create a cone with rounded topconst leafGeometry = new THREE.ConeGeometry(radius, height, segments);const leafMaterial = new THREE.MeshStandardMaterial({ color: leafColors[i % leafColors.length],roughness: 0.8,metalness: 0.2,shininess: 30});const leaf = new THREE.Mesh(leafGeometry, leafMaterial);leaf.position.y = 3 + i * 0.8;// Add slight curve for more organic lookleaf.scale.set(1, 1.1, 1);treeGroup.add(leaf);}// Tree topper (star)const starGeometry = new THREE.IcosahedronGeometry(0.5, 0);const starMaterial = new THREE.MeshStandardMaterial({ color: 0xFFD700,emissive: 0xFFD700,emissiveIntensity: 0.3,roughness: 0.2,metalness: 0.8});const star = new THREE.Mesh(starGeometry, starMaterial);star.position.y = 7.5;star.scale.set(1.2, 1.5, 1.2);treeGroup.add(star);// Decorationsconst decorationColors = [0xFF0000, 0xFFA500, 0xFFC0CB, 0x800080, 0x00BFFF];for (let i = 0; i < 30; i++) {const decorationGeometry = new THREE.SphereGeometry(0.2, 16, 16);const decorationMaterial = new THREE.MeshStandardMaterial({ color: decorationColors[i % decorationColors.length],emissive: decorationColors[i % decorationColors.length],emissiveIntensity: 0.2,roughness: 0.1,metalness: 0.9});const decoration = new THREE.Mesh(decorationGeometry, decorationMaterial);// Random position on treeconst angle = Math.random() * Math.PI * 2;const radius = Math.random() * 2 + 0.5;const height = Math.random() * 5 + 2;decoration.position.x = Math.cos(angle) * radius;decoration.position.z = Math.sin(angle) * radius;decoration.position.y = height;// Check if decoration is inside the treeconst maxRadiusAtHeight = 2.5 - (height - 2) * 0.4;if (Math.sqrt(decoration.position.x ** 2 + decoration.position.z ** 2) < maxRadiusAtHeight) {treeGroup.add(decoration);}}return treeGroup;}const christmasTree = createChristmasTree();scene.add(christmasTree);// Santa Clausfunction createSanta() {const santaGroup = new THREE.Group();// Bodyconst bodyGeometry = new THREE.SphereGeometry(0.8, 32, 32);const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0xFF0000,roughness: 0.8,metalness: 0.2});const body = new THREE.Mesh(bodyGeometry, bodyMaterial);body.position.y = 1.2;santaGroup.add(body);// Headconst headGeometry = new THREE.SphereGeometry(0.5, 32, 32);const headMaterial = new THREE.MeshStandardMaterial({ color: 0xFFDAB9,roughness: 0.9,metalness: 0.1});const head = new THREE.Mesh(headGeometry, headMaterial);head.position.y = 2.5;santaGroup.add(head);// Hatconst hatGeometry = new THREE.ConeGeometry(0.5, 0.8, 32);const hatMaterial = new THREE.MeshStandardMaterial({ color: 0xFF0000,roughness: 0.8,metalness: 0.2});const hat = new THREE.Mesh(hatGeometry, hatMaterial);hat.position.y = 3.2;santaGroup.add(hat);// Beardconst beardGeometry = new THREE.ConeGeometry(0.4, 0.6, 32);const beardMaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF,roughness: 0.9,metalness: 0.1});const beard = new THREE.Mesh(beardGeometry, beardMaterial);beard.position.y = 2.2;beard.rotation.x = Math.PI;santaGroup.add(beard);// Position Santa to the sidesantaGroup.position.set(-5, 0, 3);santaGroup.scale.set(0.8, 0.8, 0.8);return santaGroup;}const santa = createSanta();scene.add(santa);// Snowflakesfunction createSnowflakes(count) {const snowflakes = [];const snowflakeGeometry = new THREE.SphereGeometry(0.05, 8, 8);const snowflakeMaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF,transparent: true,opacity: 0.8,roughness: 0.1,metalness: 0.9});for (let i = 0; i < count; i++) {const snowflake = new THREE.Mesh(snowflakeGeometry, snowflakeMaterial);// Random positionsnowflake.position.x = (Math.random() - 0.5) * 50;snowflake.position.y = Math.random() * 20 + 5;snowflake.position.z = (Math.random() - 0.5) * 50;// Random sizeconst size = Math.random() * 0.08 + 0.02;snowflake.scale.set(size, size, size);// Add to scene and arrayscene.add(snowflake);snowflakes.push({mesh: snowflake,speed: Math.random() * 0.03 + 0.01,rotationSpeed: Math.random() * 0.05 - 0.025});}return snowflakes;}const snowflakes = createSnowflakes(200);// Lightsfunction createLights() {// Main directional light (sun)const dirLight = new THREE.DirectionalLight(0xFFFFFF, 1);dirLight.position.set(5, 10, 7);dirLight.castShadow = true;scene.add(dirLight);// Ambient lightconst ambientLight = new THREE.AmbientLight(0x404040, 0.5);scene.add(ambientLight);// Colored lights for Christmas atmosphereconst coloredLight1 = new THREE.PointLight(0xFF0000, 0.5, 10);coloredLight1.position.set(3, 5, 3);scene.add(coloredLight1);const coloredLight2 = new THREE.PointLight(0x00FF00, 0.5, 10);coloredLight2.position.set(-3, 4, 3);scene.add(coloredLight2);const coloredLight3 = new THREE.PointLight(0xFFFF00, 0.5, 10);coloredLight3.position.set(0, 6, -3);scene.add(coloredLight3);}createLights();// Animationfunction animateSnowflakes() {snowflakes.forEach(snowflake => {// Move downsnowflake.mesh.position.y -= snowflake.speed;// Rotatesnowflake.mesh.rotation.x += snowflake.rotationSpeed;snowflake.mesh.rotation.y += snowflake.rotationSpeed;// Reset if fallen below groundif (snowflake.mesh.position.y < -1) {snowflake.mesh.position.y = 20;snowflake.mesh.position.x = (Math.random() - 0.5) * 50;snowflake.mesh.position.z = (Math.random() - 0.5) * 50;}});}// Animate decorationsfunction animateDecorations() {christmasTree.children.forEach(child => {if (child.material && child.material.emissive) {// Pulsing effect for decorationsconst time = Date.now() * 0.001;const pulse = Math.sin(time * 3) * 0.2 + 0.8;child.material.emissiveIntensity = pulse * 0.3;}});}// Main animation loopfunction animate() {requestAnimationFrame(animate);controls.update();animateSnowflakes();animateDecorations();// Rotate Santa slightlysanta.rotation.y = Math.sin(Date.now() * 0.001) * 0.3;renderer.render(scene, camera);}// Handle window resizewindow.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);});// Start animationanimate();// Add some initial animation with GSAPgsap.from(christmasTree.scale, {x: 0.1,y: 0.1,z: 0.1,duration: 1.5,ease: "back.out(1.7)"});gsap.from(santa.position, {x: -10,duration: 2,delay: 0.5,ease: "power2.out"});gsap.from(snowflakes, {opacity: 0,duration: 2,stagger: 0.01});</script>
</body>
</html>
湘西土家族苗族自治州网站建设_网站建设公司_页面权重_seo优化