如何在P5.js中无需translate函数自定义sphere对象的坐标？

P5.js里的sphere()默认确实是以原点(0,0,0)为中心绘制的，要不用手动重复写translate来定位，最实用的方式是封装一个带坐标参数的自定义绘制函数，既避免冗余代码，也不会污染全局绘图状态：

// 自定义带坐标的球体绘制函数
function drawSphere(x, y, z, diameter) {
  push(); // 保存当前绘图状态
  translate(x, y, z); // 临时移动坐标系
  sphere(diameter);
  pop(); // 恢复之前的绘图状态
}

// 调用示例：绘制两个不同位置的球体并添加连接
function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  // 绘制两个球体
  drawSphere(50, 50, 0, 30);
  drawSphere(-80, -40, 0, 40);
  // 绘制球体间的连线
  line(50,50,0, -80,-40,0);
}

如果你完全不想在函数内部使用translate，也可以直接操作模型矩阵实现定位，但这种方式相对繁琐，可读性不如上面的方法：

function drawSphereAt(x, y, z, diameter) {
  // 保存当前模型矩阵
  const originalMatrix = modelMatrix.copy();
  // 应用坐标偏移
  modelMatrix.translate(x, y, z);
  sphere(diameter);
  // 恢复原矩阵
  modelMatrix.set(originalMatrix);
}

实际开发中更推荐第一种封装方式，push()/pop()能确保每次绘制球体的变换不会影响其他图形，而且你可以直接用传入的坐标参数轻松绘制球体间的连线，完全适配你处理多个对象的场景。

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