threejs shadermaterial

// threejs shadermaterial 示例代码

// 引入 Three.js 库
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 = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
    }
`;

// 创建 ShaderMaterial
const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

// 创建一个几何体
const geometry = new THREE.BoxGeometry();

// 创建网格并添加到场景中
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();

解释说明：

1. 引入 Three.js 库：使用 import 语句引入 Three.js 库。
2. 创建场景、相机和渲染器：分别创建一个场景 (THREE.Scene)、一个透视相机 (THREE.PerspectiveCamera) 和一个 WebGL 渲染器 (THREE.WebGLRenderer)。
3. 定义顶点着色器和片元着色器：
   • 顶点着色器 (vertexShader)：负责将顶点位置从模型空间转换到裁剪空间。
   • 片元着色器 (fragmentShader)：负责为每个像素指定颜色，这里设置为红色。
4. 创建 ShaderMaterial：使用自定义的顶点和片元着色器创建一个 THREE.ShaderMaterial。
5. 创建几何体和网格：创建一个立方体几何体 (THREE.BoxGeometry) 并将其与 ShaderMaterial 组合成一个网格 (THREE.Mesh)。
6. 渲染循环：通过 requestAnimationFrame 实现动画效果，不断更新网格的位置并重新渲染场景。