threejs 渐变材质

three.js 是一种 JavaScript 库，用于创建和呈现 3D 图形。它提供了许多种不同的材质来渲染 3D 对象，其中包括渐变材质。

渐变材质是一种可以在 3D 对象表面创建渐变效果的材质。它可以通过指定起始和结束颜色、渐变方向和类型等参数来创建不同的效果。

以下是使用 three.js 创建渐变材质的示例代码：

// 创建渐变材质
var material = new THREE.MeshGradientMaterial({
    type: 'LinearGradient', // 渐变类型，这里是线性渐变
    color1: new THREE.Color(0xff0000), // 起始颜色
    color2: new THREE.Color(0x0000ff), // 结束颜色
    stops: [0.2, 0.5, 0.8], // 渐变点，即从起始颜色到结束颜色渐变的位置
    direction: 'y' // 渐变方向，这里是沿着 Y 轴方向
// 创建一个立方体并应用渐变材质
var geometry = new THREE.BoxGeometry(1, 1, 1);
var mesh = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中并渲染
scene.add(mesh);
renderer.render(scene, camera);
在这个示例中，我们使用 THREE.MeshGradientMaterial 类创建了一个渐变材质，并指定了起始颜色、结束颜色、渐变点和渐变方向等参数。然后，我们创建一个立方体并将渐变材质应用于它。最后，我们将立方体添加到场景中并渲染。
需要注意的是，为了使用渐变材质，你需要引入 three.js 库以及 MeshGradientMaterial.js 文件。同时，不同的渐变类型和参数设置可能会导致不同的效果，需要根据具体需求进行调整。