炫彩液晶球

2023-11-24 21:09:45

如何用 three.js 绘制令人惊叹的彩色液晶球

准备好用 three.js 创造一个色彩缤纷的液晶球了吗？让我们踏上这段迷人的旅程，用代码创造一个令人惊叹的视觉杰作。

设定舞台：准备工作

首先，我们创建基础画布，three.js 的核心。这是代码：

const canvas = document.querySelector('canvas');
const renderer = new THREE.WebGLRenderer({canvas});
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;

绘制晶莹剔透的球体

接下来，让我们创建液晶球的核心——一个完美的球体：

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: true});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

赋予色彩：动态着色器

现在，让我们为液晶球赋予它标志性的彩色效果。three.js 提供了着色器，让我们可以自定义光照和颜色：

const vertexShader = `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  void main() {
    gl_FragColor = vec4(sin(uv.x * 10.0) * 0.5 + 0.5, cos(uv.y * 10.0) * 0.5 + 0.5, 1.0, 1.0);
  }
`;

const uniforms = {
  time: {value: 0.0}
};

const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms
});

const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

动态效果：旋转球体

为了让液晶球栩栩如生，我们让它旋转起来：

function animate() {
  requestAnimationFrame(animate);

  uniforms.time.value += 0.01;

  renderer.render(scene, camera);
}

animate();

完结：展现你的杰作

现在，您已经用 three.js 绘制了一个色彩缤纷的液晶球。让我们用这个令人惊叹的代码片段来展现它吧：

<html>
<head>
  
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <script src="three.js"></script>
  <script>
    // 代码在此处
  </script>
</body>
</html>