three.js着色器特效编程案例并注释

以下是一个three.js着色器特效编程案例，注释在代码中：

// 1. 定义场景
var scene = new THREE.Scene();

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

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

// 4. 创建物体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0.0 } // 添加一个time变量，用于控制着色器的动画效果
    },
    vertexShader: `
        uniform float time; // 从uniform传入time变量
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            gl_Position.y += sin(time) * 0.2; // 在y轴上添加sin函数的动画效果
        }
    `,
    fragmentShader: `
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 着色器的基本颜色
        }
    `
});
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

// 5. 渲染场景
function animate() {
    requestAnimationFrame( animate );

    // 更新着色器中的time变量
    material.uniforms.time.value += 0.1;

    renderer.render( scene, camera );
}
animate();

这个案例中，我们首先定义了场景、相机和渲染器。然后创建了一个立方体物体，并为它定义了一个着色器材质。该着色器材质包含了一个顶点着色器和一个片元着色器。在顶点着色器中，我们通过uniform变量从JavaScript中传入了time变量，并在y轴上添加了sin函数的动画效果。在片元着色器中，我们简单地将颜色设置为红色。

最后，我们在animate函数中更新着色器中的time变量，并渲染整个场景。