用 three.js 画个太阳

大家好，这里是 CSS 魔法使——alphardex。现在我们来创造一个太阳。

离屏渲染

首先，我们先来做离屏渲染。离屏渲染是指在渲染一个元素之前，先把它渲染到一个不在屏幕上的离屏画布上，然后再把它复制到屏幕上。这样做的好处是，我们可以控制画布的大小和分辨率，从而提高渲染性能。

我们可以使用 three.js 的 WebGLRenderer 来做离屏渲染。我们先创建一个 WebGLRenderer 对象，然后把它设置为离屏渲染模式：

const renderer = new THREE.WebGLRenderer({
  canvas: document.createElement('canvas'),
  context: 'webgl2'
});
renderer.setPixelRatio(window.devicePixelRatio);

然后，我们就可以使用 renderer 来渲染场景了。我们先创建一个场景，然后创建一个太阳对象并把它添加到场景中：

const scene = new THREE.Scene();
const sun = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshBasicMaterial({ color: 0xffff00 }));
scene.add(sun);

最后，我们使用 renderer 来渲染场景：

renderer.render(scene, camera);

这样，我们就完成了离屏渲染。接下来，我们就可以使用 three.js 的着色器来模拟太阳了。

着色器

着色器是一种特殊的程序，它可以在渲染过程中修改像素的颜色。我们可以使用着色器来模拟各种各样的效果，比如阴影、高光、纹理等。

我们可以使用 three.js 的 ShaderMaterial 来创建着色器。我们先创建一个 ShaderMaterial 对象，然后把顶点着色器和片段着色器代码设置进去：

const material = new THREE.ShaderMaterial({
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    void main() {
      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
  `
});

顶点着色器负责计算顶点的屏幕坐标，片段着色器负责计算片段的颜色。在本例中，我们使用片段着色器把片段的颜色设置为黄色。

最后，我们把着色器材质赋给太阳对象：

sun.material = material;

这样，我们就完成了太阳的模拟。接下来，我们就可以把太阳加入场景，用一个旋转动画来展示了。

加入场景并添加动画

我们先把太阳加入场景：

scene.add(sun);

然后，我们创建一个旋转动画：

const animation = new THREE.Animation(
  scene,
  new THREE.AnimationMixer(sun)
);
animation.play();

这样，我们就完成了太阳的绘制。运行代码，你就可以看到一个旋转的太阳了。

希望本文对您有所帮助。如果您有任何问题，请随时提出。