three.js 模型渐变

要在 three.js 中为模型应用渐变，您需要使用渐变材质。以下是一个示例：

// 创建一个渐变材质
var gradientTexture = new THREE.Texture(gradientCanvas);
gradientTexture.needsUpdate = true;
var gradientMaterial = new THREE.MeshBasicMaterial({
    map: gradientTexture,
});

// 创建一个立方体并应用渐变材质
var geometry = new THREE.BoxGeometry(1, 1, 1);
var cube = new THREE.Mesh(geometry, gradientMaterial);
scene.add(cube);

// 创建一个渐变画布
var gradientCanvas = document.createElement('canvas');
gradientCanvas.width = 256;
gradientCanvas.height = 256;
var gradientContext = gradientCanvas.getContext('2d');
var gradient = gradientContext.createLinearGradient(0, 0, 0, gradientCanvas.height);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
gradientContext.fillStyle = gradient;
gradientContext.fillRect(0, 0, gradientCanvas.width, gradientCanvas.height);

在这个例子中，我们首先创建了一个渐变画布，然后将其用作纹理创建了一个渐变材质。我们接着创建了一个立方体并将渐变材质应用于它。最后，我们将立方体添加到场景中。

渐变画布是通过使用渐变上下文方法创建的，这里使用的是线性渐变。您可以根据需要调整渐变的起点、终点和颜色。在本例中，我们使用了红色、绿色和蓝色来创建一个简单的彩虹渐变。