当前位置：首页 > news >正文

自已如何做网站咖啡seo是什么意思

news 2025/7/23 3:13:37

自已如何做网站,咖啡seo是什么意思,郑州营销网站托管公司,网站换空间的流程文章目录思路传递 uv传递 position限制渐变范围指定渐变颜色思路 vertexShader中使用varying定义的变量可以在fragmentShader中使用传递 uv const vertexShader varying vec2 v_uv;void main () {v_uv uv;gl_Position projectionMatrix * modelViewMatrix * vec4(position…

文章目录

- - - 思路
    - 传递 uv
    - 传递 `position`
    - 限制渐变范围
    - 指定渐变颜色

思路

vertexShader中使用varying定义的变量可以在fragmentShader中使用

传递 uv

const vertexShader = `varying vec2 v_uv;void main () {v_uv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}
`;const fragmentShader = `varying vec2 v_uv;void main () {gl_FragColor = vec4(v_uv,0.7,1);}
`;export const colorPlaneShader = {vertexShader,fragmentShader,
};

在这里插入图片描述

const colorBox = () => {const box = new THREE.Mesh(new THREE.BoxGeometry(5, 6, 10),new THREE.ShaderMaterial({...colorUVShader,}));box.translateX(10);return box;
};

传递 `position`

const veryingPositionShader = {vertexShader: `varying vec3 v_position;void main () {v_position = position;gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}`,fragmentShader: ` varying vec3 v_position;void main () {gl_FragColor = vec4(v_position,1);}`,
};

在这里插入图片描述

限制渐变范围

在这里插入图片描述

const appointColorBox = () => {const vertexShader = `varying vec3 v_position;void main () {v_position = position;gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}`;const fragmentShader = `varying vec3 v_position;// 最小颜色值float min = 0.6835559;// 最大颜色值float max = 0.6255737;void main () {// 无法直接修改 v_position// 限制在这个区间float val = min + (max - min) * v_position.y;gl_FragColor = vec4(val,val,val,1);}`;const box = new THREE.Mesh(new THREE.BoxGeometry(5, 6, 10),new THREE.ShaderMaterial({vertexShader,fragmentShader,side: 2,}));return box;
};

指定渐变颜色

在这里插入图片描述

lineGradientSphere({ r: 1, g: 0, b: 0 }, { r: 1, g: 1, b: 1 })

/*** @description: 指定两个渐变色创建渐变物体* @param {string} color1 rgb格式颜色* @param {string} color2 rgb格式颜色* @return {*}*/
export const lineGradientSphere = (color1: { r: number; g: number; b: number },color2: { r: number; g: number; b: number }
) => {const vertexShader = `varying vec2 v_uv;void main () {v_uv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}`;const fragmentShader = `varying vec2 v_uv;uniform float u_r_base;uniform float u_g_base;uniform float u_b_base;uniform float u_r_space;uniform float u_g_space;uniform float u_b_space;void main () {// 限制在这个区间float r = u_r_base + (u_r_space) * v_uv.y;float g = u_g_base + (u_g_space) * v_uv.y;float b = u_b_base + (u_b_space) * v_uv.y;gl_FragColor = vec4(abs(r),abs(g),abs(b),1);}`;const uniforms = {u_r_base: { value: color1.r },u_g_base: { value: color1.g },u_b_base: { value: color1.b },u_r_space: {value: color1.r - color2.r,},u_g_space: {value: color1.g - color2.g,},u_b_space: {value: color1.b - color2.b,},};const sphere = new THREE.Mesh(new THREE.SphereGeometry(3.14, 32, 32),new THREE.ShaderMaterial({vertexShader,fragmentShader,side: 2,uniforms,}));return sphere;
};