今夏独特的三分消暑：雪糕地球在Three.js的诞生

2024-02-22 05:08:56

在炎炎夏日中，除了冰镇西瓜、空调冷饮，还有什么能带给我们一份独特的清凉？不如就让地球也凉爽一夏，用Three.js变身一个“雪糕地球”吧！

实现步骤：

Three.js 初始化：
- 设置场景、相机和渲染器。
地球模型创建：
- 创建球体几何体。
- 添加纹理贴图。
雪糕球体创建：
- 创建锥体几何体作为雪糕顶部。
- 旋转锥体并放置在球体顶部。
纹理贴图应用：
- 加载雪糕纹理贴图并应用到雪糕顶部。
- 调整纹理重复率和位移。
照明和阴影：
- 添加环境光源。
- 添加方向光源并调整其角度。
动画效果：
- 使用缓动函数创建地球自转动画。
- 使用变形动画创建雪糕融化效果。

示例代码：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const earthGeometry = new THREE.SphereGeometry(5, 32, 32);
const earthMaterial = new THREE.MeshBasicMaterial({map: earthTexture});
const earth = new THREE.Mesh(earthGeometry, earthMaterial);

const iceCreamGeometry = new THREE.ConeGeometry(2, 4, 32);
const iceCreamMaterial = new THREE.MeshBasicMaterial({map: iceCreamTexture});
const iceCream = new THREE.Mesh(iceCreamGeometry, iceCreamMaterial);

iceCream.position.y = 6;
iceCream.rotation.x = -Math.PI / 2;

scene.add(earth);
scene.add(iceCream);

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

function animate() {
  requestAnimationFrame(animate);

  earth.rotation.y += 0.01;

  iceCream.scale.y -= 0.001;

  renderer.render(scene, camera);
}