在threejs中使用顶点着色器旋转几何体

// 创建几何体
var geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格对象
var mesh = new THREE.Mesh(geometry, material);

// 创建顶点着色器
var vertexShader = `
    uniform float time;
    varying vec3 vColor;

    void main() {
        vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewPosition;
        
        // 计算旋转角度
        float angle = time * 2.0;
        
        // 旋转顶点坐标
        float x = position.x * cos(angle) - position.z * sin(angle);
        float z = position.x * sin(angle) + position.z * cos(angle);
        vec3 rotatedPosition = vec3(x, position.y, z);
        
        // 传递颜色属性
        vColor = color;
    }
`;

// 创建片元着色器
var fragmentShader = `
    varying vec3 vColor;

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

// 创建着色器材质
var shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

// 应用着色器材质
mesh.material = shaderMaterial;

// 添加到场景中
scene.add(mesh);

// 渲染循环中更新旋转参数
function animate() {
    requestAnimationFrame(animate);
    
    // 更新旋转参数
    shaderMaterial.uniforms.time.value += 0.01;
    
    renderer.render(scene, camera);
}
animate();