webgl着色器学习-fragmentShader使用three.js传入变量 (uniform使用)

使用uniform传递

const uniforms = {
        u_TransferColor: { value: new THREE.Color(color) },
    };

规范: 值必须具有value属性的一个对象

在fragmentShader中使用

   const fragmentShader = `
        uniform vec3 u_TransferColor;

        void main () {
            gl_FragColor = vec4(u_TransferColor,1);
        }
    `;
'
运行
运行

案例
指定颜色的盒子

import * as THREE from "three";

export const createBox = (color: string) => {
    const vertexShader = `
        void main () {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
        }
    `;
    const fragmentShader = `
        uniform vec3 u_TransferColor;

        void main () {
            gl_FragColor = vec4(u_TransferColor,1);
        }
    `;

    const uniforms = {
        u_TransferColor: { value: new THREE.Color(color) },
    };

    const box = new THREE.Mesh(
        new THREE.BoxGeometry(5, 6, 10),
        new THREE.ShaderMaterial({
            vertexShader,
            fragmentShader,
            uniforms,
        })
    );
    return box;
};