3D水晶玫瑰的示例代码：

以下是一个使用Three.js创建3D水晶玫瑰的示例代码，包含基本模型、材质和光照设置： ```javascript // 引入Three.js库（确保在HTML中已加载） // 示例：<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> // 初始化场景、相机和渲染器 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); // 创建水晶玫瑰的几何体（使用多个球体和圆柱体组合模拟花瓣和茎） const roseGroup = new THREE.Group(); // 创建花瓣（使用变形的球体） const petalGeometry = new THREE.SphereGeometry(1, 16, 16); for (let i = 0; i < 8; i++) { const petal = new THREE.Mesh(petalGeometry, new THREE.MeshPhysicalMaterial({ color: 0xff66cc, transparent: true, opacity: 0.8, roughness: 0.1, metalness: 0.3, clearcoat: 1.0, clearcoatRoughness: 0.1 })); petal.scale.set(1, 1.5, 0.5); petal.position.y = 2; petal.rotation.y = (i / 8) * Math.PI * 2; roseGroup.add(petal); } // 创建花蕊（使用小圆柱体） const stamenGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.5, 8); const stamen = new THREE.Mesh(stamenGeometry, new THREE.MeshPhysicalMaterial({ color: 0xffff00, roughness: 0.2, metalness: 0.5 })); stamen.position.y = 2.5; roseGroup.add(stamen); // 创建茎（使用圆柱体） const stemGeometry = new THREE.CylinderGeometry(0.2, 0.3, 5, 16); const stem = new THREE.Mesh(stemGeometry, new THREE.MeshPhysicalMaterial({ color: 0x00aa00, roughness: 0.5, metalness: 0.1 })); stem.position.y = -1; roseGroup.add(stem); scene.add(roseGroup); // 添加光照 const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 10, 7); scene.add(directionalLight); // 设置相机位置 camera.position.z = 10; // 动画循环 function animate() { requestAnimationFrame(animate); roseGroup.rotation.y += 0.01; // 缓慢旋转玫瑰 renderer.render(scene, camera); } animate(); // 响应窗口大小变化 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： - 几何体顶点数过多可能导致性能下降，需根据场景复杂度调整参数。 - 透明材质的渲染顺序可能出错，应确保正确设置对象的renderOrder。 - 物理材质的clearcoat等高级属性在不支持的设备上可能失效，需测试兼容性。 [2025-12-23 15:11:15 | AI写代码神器 | 825点数解答]