如何实现以SVG/图片替代圆点的Fibonacci Sphere（斐波那契球面）效果

核心修改思路 #

• 替换原纯色圆点容器为图片载体，内部插入自定义SVG/PNG/JPG等格式的资源
• 新增图片朝向修正逻辑，保证球面旋转过程中所有图片始终面向观察者
• 调整样式、坐标参数适配图片的展示尺寸和层级关系

具体修改代码 #

1. CSS 修改 #

body, html{
  height: 100%;
  position: relative;
  overflow: hidden; /* 避免多余滚动条 */
  margin: 0;
  padding: 0;
  background-color: #232B2B;
}

#canvas{
  height: 500px;
  width: 500px;
  position: relative;
  left: 50%;
  top: 50vh;
  transform: translate(-50%, -50%);
}

.point{
  position: absolute;
  transform-style: preserve-3d;
  width: 24px; /* 可按需调整为你需要的图片展示尺寸 */
  height: 24px;
  border-radius: 4px; /* 可选，给图片添加圆角效果 */
  overflow: hidden;
}
.point img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保证SVG等矢量资源不变形 */
}

2. JS 修改 #

// 替换为你自己的图片资源路径，支持SVG、PNG、JPG等所有Web可加载的图片格式
const imgList = [
  "./logo1.svg",
  "./logo2.png",
  "./icon1.svg",
  "./icon2.jpg"
  // 按需添加更多资源
];
var cant = imgList.length * 2; // 球面点位总数量，可自定义，超过图片数量会自动循环复用
var offset = 2 / cant;
var increment = Math.PI * (3 - Math.sqrt(5));
var canvas = document.getElementById("canvas");

var i;
var pointContainer;

//---构建元素
for(i = 0; i < cant; i++){
  pointContainer = document.createElement("div");
  pointContainer.className = "point";
  pointContainer.setAttribute("data-index", i);
  // 插入自定义图片
  const img = document.createElement("img");
  img.src = imgList[i % imgList.length]; // 图片不足时自动循环复用资源
  pointContainer.appendChild(img);
  canvas.appendChild(pointContainer);
};

//---为点应用变换
function updatePoints(evt){
  var x, y, z, r, a, scale, opacity, point, style;
  var angle = (evt) ? (-evt.pageX / 4) * Math.PI / 180 : 0;
  const canvasCenter = 250; // 和canvas宽高的1/2保持一致即可
  const sphereRadius = 200; // 球面整体半径，可按需调整大小

  for(i = 0; i < cant; i++){
    y = (i * offset - 1) + (offset / 2);
    r = Math.sqrt(1 - Math.pow(y, 2));
    a = ((i + 1) % cant) * increment + angle;
    x = Math.cos(a) * r;
    z = Math.sin(a) * r;

    scale = Math.round(z * 20000) / 100;
    opacity = (1 + z) / 1.5;
    // 新增rotateY修正图片朝向，保证始终面向观察者；zIndex保证正面图片层级更高
    style = `translate3d(${canvasCenter + x * sphereRadius}px, ${canvasCenter + y * sphereRadius}px, ${scale}px) rotateY(${-a * 180 / Math.PI}deg)`;
    
    point = canvas.querySelectorAll("[data-index='" + i +"']");    
    point[0].style.transform = style;
    point[0].style.opacity = opacity;
    point[0].style.zIndex = Math.floor(z * 100);
  }
}

//---初始化时更新点位
updatePoints();

//---鼠标移动时更新点位
document.addEventListener("mousemove", updatePoints);

3. HTML 保持原有结构即可 #

<div id="canvas">
  
</div>

可调参数说明 #

• imgList：替换为你自己的图片资源路径
• cant：球面点位总数量，可按需调整
• .point的宽高：调整单张图片的展示尺寸
• sphereRadius：调整整个斐波那契球面的大小
• canvas的宽高：调整整个画布的展示尺寸

内容的提问来源于stack exchange，提问作者Eol Nuha