从土星到太阳系：两个Three.js项目的调试手记

缘起最近用Three.js写了两个小项目一个是土星粒子环一个是完整的太阳系。本来只是自己玩没想到调试过程还挺有意思记录一下遇到的一些问题和解法。项目一开普勒土星粒子环第一个想法很简单做一个土星核心是粒子球周围是旋转的粒子环粒子运动要符合开普勒定律。遇到的问题**1. 粒子太规整了**一开始粒子环匀速转看起来像旋转木马不像行星环。开普勒定律说离中心越远速度越慢所以给每个粒子设置了不同的速度因子speedFactor 0.6 / Math.pow(r, 0.5)。**2. 滚轮缩放时的亮度变化**需求是小暗大亮也就是拉近看时要更亮。这个用uniform传递缩放因子到着色器在片元着色器里乘到颜色上就行。**3. 近距混沌效果**当粒子放大到快出屏幕时要叠加无规则噪点。问题是怎么判断快到屏幕边缘最后用相机距离判断当zoomFactor 1.6时混沌强度 (zoomFactor - 1.6) * 3.5。噪声用正弦余弦组合虽然不真正随机但视觉效果够用了。项目二可行走的太阳系有了土星的经验想做个更大的整个太阳系还能站在星球表面走。踩过的坑**1. 星球表面行走的算法**这个想了很久。用经纬度是最简单的方案- 纬度(-90~90)经度(0~360)- 球面坐标转笛卡尔x r*cos(lat)*cos(lon), y r*sin(lat), z r*cos(lat)*sin(lon)- W前时lat speed*cos(yaw), lon speed*sin(yaw)**2. WASD没反应**写完了发现按W没动检查发现- 移动速度设成了0.02太慢了改成0.5才感觉到- 没加event.preventDefault()页面滚动把事件吞了**3. 星球材质太单调**用Canvas动态生成纹理- 岩质行星加随机噪点- 气态行星画水平条纹- 地球简单画几块绿色代表大陆- 月球画明暗圆环模拟坑洞虽然比不上真实纹理但至少能区分出不同星球了。**4. 性能问题**一开始星星设了10000个行星分段数48阴影2048结果掉帧严重。降到2000星星、24分段、512阴影流畅多了。肉眼其实看不出差别。**5. ESC退出**按ESC时没有退出星球视角。加了个监听if (event.code Escape isPlanetView) exitPlanetView()。## 一些有用的代码片段**球面行走核心**javascriptfunction updateSurfacePosition() {if (moveState.forward) {latitude moveSpeed * Math.cos(yaw)longitude moveSpeed * Math.sin(yaw)}// ... 其他方向// 转笛卡尔坐标const surfaceOffset new THREE.Vector3(radius * Math.cos(latRad) * Math.cos(lonRad),radius * Math.sin(latRad),radius * Math.cos(latRad) * Math.sin(lonRad))camera.position.copy(planetPos.clone().add(surfaceOffset))}**简单的纹理生成**javascriptfunction createGasTexture(baseColor) {const canvas document.createElement(canvas)// 画条纹...return new THREE.CanvasTexture(canvas)}小结这两个项目没用什么高级技术就是Three.js基础API加一些数学计算。主要工作是1. 把需求拆解成具体的算法开普勒定律、球面行走2. 遇到问题先看控制台再看事件有没有被拦截3. 性能不够就降配置往往看不出差别代码都在上面了有兴趣的可以跑跑看。有问题欢迎交流