如何在ThreeJS中更改着色器颜色

// 导入ThreeJS库
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建着色器材质
const vertexShader = `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  uniform vec3 color;

  void main() {
    gl_FragColor = vec4(color, 1.0);
  }
`;

const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms: {
    color: { value: new THREE.Vector3(1, 0, 0) } // 初始颜色为红色
  }
});

// 创建几何体
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);

// 将几何体添加到场景中
scene.add(cube);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 旋转物体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
}

animate();