使用three.js渲染场景时球体无法显示，代码存在哪些遗漏？

代码问题排查 #

• canvas选择器语法错误，querySelector('c')是匹配标签为的元素，你的canvas id为c，需要改为querySelector('#c')
• WebGLRenderer初始化参数错误，需传入配置对象指定canvas，而非直接传入canvas元素，正确写法为new THREE.WebGLRenderer({canvas: canvas})
• 相机默认位置与太阳网格位置重合，均在世界坐标原点(0,0,0)，导致无法观测到物体，需手动调整相机位置，例如沿Z轴后移camera.position.z = 10
• 你使用的MeshPhongMaterial为光照响应材质，若未额外添加场景光源，可改为不受光照影响的MeshBasicMaterial，或补充场景环境光/平行光，避免材质渲染异常
• 相机宽高比设置为2，与你canvas的300*300尺寸的1:1宽高比不匹配，可同步改为对应值避免画面拉伸

修正后JS代码 #

function solar_system()
{
  // 修正canvas选择器
  const canvas = document.querySelector('#c');
  // 修正渲染器初始化参数
  const renderer = new THREE.WebGLRenderer({canvas: canvas});
  // 修正相机宽高比匹配canvas尺寸
  const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 0.1, 1000);
  // 调整相机位置，远离原点
  camera.position.z = 10;
  camera.lookAt(0, 0, 0);
  const scene = new THREE.Scene();

  // 添加环境光，适配MeshPhongMaterial的光照要求
  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);

// 每个球体使用同一个球体几何实例
  const radius = 1;
  const widthSegments = 6;
  const heightSegments = 6;
  const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
// 制作太阳
  const sunMaterial = new THREE.MeshPhongMaterial({emissive:0xFFFF00});
  const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
  scene.add(sunMesh);
  renderer.render(scene,camera);
}

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