3.js - 使用着色器实现各种图形

有更多案例，私我

main.js

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import * as dat from 'dat.gui'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'// @ts-ignore
import basicVertexShader from './shader/11-02/deep/vertexShader.glsl?raw'
// @ts-ignore
import basicFragmentShader from './shader/11-02/deep/fragmentShader.glsl?raw'const scene = new THREE.Scene()
// scene.background = new THREE.Color('#ffffff')const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.aspect = window.innerWidth / window.innerHeight
camera.position.set(0, 0, 10)const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)// --------------------------------------------------------------------const textureLoader = new THREE.TextureLoader()
let texture = textureLoader.load('../public/assets/texture/ca.jpeg')// 创建着色器材质
const shaderMaterial = new THREE.ShaderMaterial({vertexShader: basicVertexShader,fragmentShader: basicFragmentShader,uniforms: {// 动画时间uTime: {value: 0},uTexture: {value: texture}},side: THREE.DoubleSide,transparent: true
})const floor = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 64, 64), shaderMaterial)
scene.add(floor)// --------------------------------------------------------------------const renderer = new THREE.WebGLRenderer({ alpha: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = trueconst clock = new THREE.Clock()
const render = () => {let time = clock.getElapsedTime()shaderMaterial.uniforms.uTime.value = time// controls.update()requestAnimationFrame(render)renderer.render(scene, camera)
}
render()window.addEventListener('resize', () => {// 重置相机的宽高比camera.aspect = window.innerWidth / window.innerHeight// 更新相机的投影矩阵camera.updateProjectionMatrix()// 重置渲染器的宽高比renderer.setSize(window.innerWidth, window.innerHeight)// 更新渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})

vertexShader.glsl

precision lowp float;varying vec2 vUv;void main() {vUv = uv;vec4 modelPosition = modelMatrix*vec4(position, 1.0);gl_Position = projectionMatrix*viewMatrix*modelPosition;
}

precision highp float;varying vec2 vUv;void main() {1、通过顶点对应的uv，决定每一个像素在uv图像的位置，通过这个位置x,y决定颜色// gl_FragColor = vec4(vUv, 0, 5);2、第1的变形// gl_FragColor = vec4(vUv, 1, 1);3、利用uv，实现，渐变效果，左 -> 右// float strengh = vUv.x;// gl_FragColor = vec4(strengh, strengh, strengh, 1);4、利用uv，实现，渐变效果，下 -> 上// float strengh = vUv.y;// gl_FragColor = vec4(strengh, strengh, strengh, 1);5、利用uv，实现，渐变效果，上 -> 下// float strengh = 1.0 - vUv.y;// gl_FragColor = vec4(strengh, strengh, strengh, 1);6、利用uv，实现，段范围内渐变（这里是，由，黑->白，的渐变）// float strengh = vUv.y * 5.0;// gl_FragColor = vec4(strengh, strengh, strengh, 1);7、利用取模，实现，反复效果// float strengh = mod(vUv.y * 5.0, 1.0); `就是把y，分成5份`float strengh = mod(vUv.x * 10.0, 1.0); `就是把x，分成10份`gl_FragColor = vec4(strengh, strengh, strengh, 1);8、利用，step(edge, x)，如果 x < edge，返回0.0，否则返回1.0// float strengh = mod(vUv.y * 10.0, 1.0);// strengh = step(0.5, strengh);// gl_FragColor = vec4(strengh, strengh, strengh, 1);9、利用，step(edge, x)，如果 x < edge，返回0.0，否则返回1.0// float strengh = mod(vUv.y * 10.0, 1.0);// strengh = step(0.8, strengh);// gl_FragColor = vec4(strengh, strengh, strengh, 1);10、利用，step(edge, x)，如果 x < edge，返回0.0，否则返回1.0// float strengh = mod(vUv.x * 10.0, 1.0);// strengh = step(0.8, strengh);// gl_FragColor = vec4(strengh, strengh, strengh, 1);11、条纹相加// float strength = step(0.8, mod(vUv.x*10.0, 1.0));// strength += step(0.8, mod(vUv.y*10.0, 1.0));// gl_FragColor = vec4(strength, strength, strength, 1);12、条纹相乘// float strength = step(0.8, mod(vUv.x*10.0, 1.0));// strength *= step(0.8, mod(vUv.y*10.0, 1.0));// gl_FragColor = vec4(strength, strength, strength, 1);13、条纹相减float strength = step(0.8, mod(vUv.x*10.0, 1.0));strength -= step(0.8, mod(vUv.y*10.0, 1.0));gl_FragColor = vec4(strength, strength, strength, 1);
}