首次使用Three.js无内容显示，看不到环面结与对应颜色，调试未解决

问题原因 #

你的代码仅完成了场景、相机、网格物体、渲染器的初始化配置，缺少触发画面渲染的核心调用，所以没有内容输出。

修复方案 #

在JS代码的最后添加渲染逻辑即可：

方案1：单次渲染（无动画需求时使用） #

添加一行渲染调用即可看到环面结：

rendu.render(scene, camera);

方案2：循环渲染（需要做动画/交互时使用） #

添加requestAnimationFrame驱动的渲染循环，后续也可以直接在循环里加动画逻辑：

function animate() {
  requestAnimationFrame(animate);
  // 可在此处添加物体动画逻辑，例如让环面结旋转：forme.rotation.y += 0.01
  rendu.render(scene, camera);
}
animate();

可选优化点 #

• MeshNormalMaterial的wireframeLinewidth属性在绝大多数桌面端WebGL实现中不生效，WebGL原生限制线宽最大为1，需要粗线框效果要改用其他实现方案
• 你当前设置了rendu.setClearColor(0xff7f50, 0)，第二个参数为透明度，设为0会导致背景完全透明，如果要显示你设置的珊瑚色背景，将第二个参数改为1即可
• canvas样式建议补充display: block，避免inline元素默认边距导致页面出现多余滚动条

内容的提问来源于stack exchange，提问作者Lyes.bcb