2. RawShaderMaterial介绍

我们之前在three.js中使用着色器，大多时候都是通过ShaderMaterial着色器材质传入着色器程序，使用这个着色器材质比较方便，因为three.js已经内置了很多常用的变量如position、color、normal、uv等，其实three.js还提供了另外一个着色器材质 RawShaderMaterial ，与ShaderMaterial相比唯一的区别就是去掉了上面提到的内置变量，需要什么变量完全自己定义，这一次就使用这个材质完全定义自己需要的变量编写着色器程序

3. demo代码

demo代码量较少，就不一一说明了，请直接查阅代码

< div id = "container" > < / div > < script type = "text/javascript" src = "../three/build/three.js" > < / script > < script > var container ; var camera , scene , planeMesh , renderer ; var uniforms = { u_resolution : { type : "v2" , value : new THREE . Vector2 ( ) radius : { type : "f" , value : 0.5 u_time : { type : "f" , value : 0.5 var vertexShader = ` attribute vec3 position; void main() { gl_Position = vec4( position, 1.0 ); var fragmentShader = ` #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform float u_time; uniform float radius; void main( void ) { vec2 uv = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y; vec2 center = vec2(.0,.0); float dist = distance(center,uv); float angularVelocity = 12.0;//角速度 float frequency = 12.0;//频率 float amplitude = 0.05;//振幅 float offset = -0.5;//偏距 float initialPhase = frequency * u_time;//初相位 float y = amplitude * sin((angularVelocity*uv.x)+initialPhase)+offset;//波浪函数 if(y < 1.0){ y += u_time/10.0; if(dist < radius){//在圆内 if(uv.y < y){//波浪以下部分着色 gl_FragColor = vec4(0.1,0.6,0.9,1.0); }else{ gl_FragColor = vec4(0.1,0.2,0.3,.6); init ( ) ; animate ( ) ; function init ( ) { container = document . getElementById ( 'container' ) ; camera = new THREE . Camera ( ) ; scene = new THREE . Scene ( ) ; var geometry = new THREE . PlaneBufferGeometry ( 2 , 2 ) ; var material = new THREE . RawShaderMaterial ( { uniforms : uniforms , vertexShader : vertexShader , fragmentShader : fragmentShader } ) ; planeMesh = new THREE . Mesh ( geometry , material ) ; scene . add ( planeMesh ) ; renderer = new THREE . WebGLRenderer ( ) ; renderer . setSize ( 800 , 800 ) ; //设置窗口大小800px*800px container . appendChild ( renderer . domElement ) ; uniforms . u_resolution . value . x = renderer . domElement . width ; uniforms . u_resolution . value . y = renderer . domElement . height ; function animate ( ) { requestAnimationFrame ( animate ) ; planeMesh . material . uniforms . u_time . value += 0.02 ; if ( planeMesh . material . uniforms . u_time . value > 10.0 ) { planeMesh . material . uniforms . u_time . value = 0.0 renderer . render ( scene , camera ) ; < / script > < / body > 使用着色器创建扩散光圈1. demo效果2. RawShaderMaterial介绍3. demo代码1. demo效果2. RawShaderMaterial介绍我们之前在three.js中使用着色器，大多时候都是通过ShaderMaterial着色器材质传入着色器程序，使用这个着色器材质比较方便，因为three.js已经内置了很多常用的变量如position、color、normal、uv等，其实three.js还提供了另外一个着色器材质RawShaderMaterial，与ShaderMate const color = "#5588aa"; // 创建box const geometry = new THRE E.PlaneBufferGeometry(width, width, 1, 1); const vertex Shader = ` varying vec2 vUv; var focus Shader = new THRE E. Shader Pass( THRE E.Focus Shader ); focus Shader .uniforms["screenWidth"].value = window.innerWidth; focus Shader .uniforms["scr void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); const smokeFragment Shader = ` uniform vec3 color; uniform float opacity; varying vec3 vWorldPosition; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( 10 0.0, 300.0, depth); gl_FragColor = vec4(color, opacity) * fogFactor; const smokeMaterial = new THRE E. Shader Material({ uniforms: { color: { value: new THRE E.Color(0xaaaaaa) }, opacity: { value: 0.5 } vertex Shader : smokeVertex Shader , fragment Shader : smokeFragment Shader , transparent: true const smokeGeometry = new THRE E.PlaneGeometry( 10 00, 10 00); const smokeMesh = new THRE E.Mesh(smokeGeometry, smokeMaterial); smokeMesh.position.set(0, 0, -500); scene.add(smokeMesh); 这个 shader 通过计算深度值来模拟烟雾效果。在顶点 着色器 中，我们通过将顶点位置乘以模型矩阵得到世界坐标系下的位置，然后将它传递给片元 着色器 。在片元 着色器 中，我们计算每个像素的深度值，并根据深度值计算烟雾因子，最后将它乘以颜色和不透明度来得到最终的颜色。你可以根据需要调整烟雾的颜色、不透明度、大小和位置。 hiter_tang:

啊对对对作者你真棒，应该奖励一朵小红花

好开心啊，能遇到像你这样的作者大大，等我一下哈，我给你打赏一点，你的内容针不戳，我好爱啊，嫁给我吧么么哒，（感激不尽感激不尽）

整理的那么详细，你肯定是位大佬，（羡慕不已羡慕不已）点赞了哈，等会儿也叫我的好哥们儿来帮你点赞，有用价值：1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 三维空间中绘制点、线、面、UV贴图，万能的BufferGeometry(three.js实战4) linefate: 我也报这个错，请问大佬怎么解决的 vue-color插件取色器拾色器使用示例，vue实用demo颜色选择器Sketch组件使用，vue中选色板使用示例 npm install vue-color之后，库里面没有vue-color是怎么回事