3.js - modelPosition.z = sin((modelPosition.x+uTime)10.0)0.05；

改了一个昵称

已于 2024-10-17 14:16:07 修改

阅读量728

点赞数 3

CC 4.0 BY-SA版权

分类专栏： three.js 文章标签： three.js

于 2024-09-05 11:42:35 首次发布

本文链接：https://blog.csdn.net/pig_ning/article/details/141925508

three.js 专栏收录该内容

88 篇文章

订阅专栏

哈

1、完整的动态波纹效果吧

`main.js`

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 顶点着色器
import basicVertexShader from './shader/11-01/raw/vertex.glsl?raw'
// 片元着色器
import basicFragmentShader from './shader/11-01/raw/fragment.glsl?raw'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 700)
camera.position.set(0, 0, 10)

// const axesHelper = new THREE.AxesHelper(5)
// scene.add(axesHelper)

// --------------------------------------------------------------------

/*
  宽度，
  高度，
  宽度分段数：它决定了平面在宽度方向上被分割成多少个小矩形（或更准确地说，是顶点网格的宽度分辨率）。
             更高的值会创建更平滑的曲线（虽然对于平面来说，这主要体现在边缘的圆形或平滑处理上，如果有的话），但也会增加渲染的顶点和面数。
  高度分段数：与宽度分段数类似，它决定了平面在高度方向上被分割成多少个小矩形。
*/
const planeGeometry = new THREE.PlaneGeometry(1, 1, 64, 64)

// 普通材质
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
})

// 着色器材质
// const shaderMaterial = new THREE.ShaderMaterial({
//   vertexShader: `
//     void main(){
//       gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
//     }
//   `,
//   fragmentShader: `
//     void main(){
//       gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
//     }
//   `
// })

const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('../public/assets/texture/ca.jpeg')

/*
  原始着色器材质，
*/
const rawShaderMaterial = new THREE.RawShaderMaterial({
	vertexShader: basicVertexShader, // 顶点着色器的GLSL代码（一个字符串）
	fragmentShader: basicFragmentShader, // 片元着色器的GLSL代码（一个字符串）
	side: THREE.DoubleSide,
	`uniforms：一个对象，包含了在着色器代码中使用的全局变量，这些变量可以在JS中设置，并在着色器中被访问和修改。`
	uniforms: {
		`uTime：用于在着色器中模拟时间，其value属性被初始化为0，但可以在JS中随时间更新，以在着色器中创建【动态效果】。`
		uTime: {
			value: 0
		},
		`uTexture：用于将纹理传递给着色器`
		uTexture: {
			// value: texture
			value: null
		}
	}
})

const plane = new THREE.Mesh(planeGeometry, rawShaderMaterial)
scene.add(plane)

// --------------------------------------------------------------------

const renderer = new THREE.WebGLRenderer({
	antialias: true
})
renderer.shadowMap.enabled = true
renderer.toneMapping = THREE.ReinhardToneMapping
renderer.toneMappingExposure = 1
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const clock = new THREE.Clock()
const render = () => {
	// 获取，自Clock对象创建以来，经过的秒数
	const elapsedTime = clock.getElapsedTime()
	// 色器中的uTime变量，就会随着时间的推移而更新
	rawShaderMaterial.uniforms.uTime.value = elapsedTime
	
	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)
})

`vertex.glsl`

/*
  precision关键字：设置着色器中使用的浮点数精度为lowp（低精度），有助于在不影响视觉效果的情况下提高渲染性能
      precision lowp float;   // 后续，所有浮点数的精度，为lowp（低精度：-2^8 - 2^8）
      precision lowp mediump; // 后续，所有浮点数的精度，为mediump（中精度：-2^10 - 2^10）
      precision lowp highp;   // 后续，所有浮点数的精度，为highp（高精度：-2^16 - 2^16）*/
precision lowp float;

/*
  attribute：在顶点着色器中声明变量（在较新的GLSL版本中，attribute已经被in关键字所取代）
  vec3：一个数据类型，代表一个三维向量 */
attribute vec3 position;

attribute vec2 uv; // uv：每个顶点的纹理坐标（u, v）

// 模型空间 -> 世界空间 -> 观察空间 -> 裁剪空间，然后，最终映射到屏幕坐标上，这是渲染管线中的标准变换顺序
uniform mat4 modelMatrix; // modelMatrix模型矩阵：用于将顶点，从模型空间 -> 世界空间
uniform mat4 viewMatrix; // viewMatrix视图矩阵：用于将顶点，从世界空间 -> 观察空间
uniform mat4 projectionMatrix; // projectionMatrix投影矩阵：用于将顶点，从观察空间 -> 裁剪空间，并最终映射到屏幕坐标上

// 获取时间
uniform float uTime; // uTime：一个统一变量，用于传递时间信息，可以用于动画效果

varying vec2 vUv; // vUv：传递给片段着色器的纹理坐标

varying float vElevation;

void main() {
  // 将输入的纹理坐标传递给片段着色器
  vUv = uv;

  // 顶点着色器处理的每个顶点，都有一个位置(position)，这个位置是一个三维向量(vec3)，包含x、y、z三个坐标

  // 用于，将顶点的位置，从模型空间啊 -> 世界空间
  vec4 modelPosition = modelMatrix*vec4(position, 1.0);

  // modelPosition.x += 1.0;
  // modelPosition.z += 1.0;
  // modelPosition.z += modelPosition.x;

 `
    1、
      通过，正弦函数sin，动态的调整，顶点的z坐标，创建一种基于时间和顶点位置的波动效果
      乘以0.05：基于顶点x坐标和时间的正弦波值，并将其幅度缩放为原始值的5%，
      意味着，
      随着uTime（时间）的增加，顶点的z坐标，将根据其在x轴上的位置以正弦波的形式变化。
    2、
      sin((modelPosition.x + uTime) * 10.0)，为什么乘以10呢？
      因为，正弦函数sin的周期是2π，
      意味着，它完成一个完整的波形（从0到1，再到0）需要2π个单位
      但是，
      对(modelPosition.x + uTime)乘以10之后，
      实际上，是在对，正弦函数sin的周期，进行缩放，
      使得原本需要2π单位才能完成的波形，现在只需要(2π / 10) = 0.2π单位，就能完成一次完整的周期，
      所以，乘以10.0，
      意味着，
      波形在相同的空间或时间范围内，完成了更多的周期，从而增加了波形的频率`
  modelPosition.z = sin((modelPosition.x+uTime)*10.0)*0.05;
  modelPosition.z += sin((modelPosition.y+uTime)*10.0)*0.05;

  vElevation = modelPosition.z; // 将调整后的z值传递给片段着色器 

  `计算顶点在裁剪空间中的位置，gl_Position，是GLSL内置的输出变量，用于存储顶点的最终位置`
  gl_Position = projectionMatrix*viewMatrix*modelPosition;
}

`fragment.glsl`

precision lowp float; // 设置着色器中使用的浮点数精度为lowp（低精度），有助于在不影响视觉效果的情况下提高渲染性能

varying vec2 vUv; // 顶点着色器传过来的，表示，每个片段（像素）在纹理图像上的UV坐标

varying float vElevation; // 顶点着色器传过来的，表示，每个顶点的高度信息，这里用它来影响片段的颜色

uniform sampler2D uTexture; // 这是一个统一变量，指向一个二维纹理图像

void main() {
	// gl_FragColor = vec4(vUv, 0.0, 1.0);
	// float height = vElevation + 0.05 * 10.0;
	// gl_FragColor = vec4(1.0*height,0.0, 0.0, 1.0);
	
	/* 使用texture2D()函数，根据UV坐标，从uTexture纹理中采样颜色，
	   texture2D()函数，返回的是一个包含RGBA四个分量的vec4向量。 */
	vec4 textureColor = texture2D(uTexture, vUv);
	
	// 根据UV，取出对应的颜色
	float height = vElevation+(0.05*20.0); `将顶点的高度vElevation，增加了一个固定值`
	
	`将采样得到的纹理颜色（仅RGB部分）与计算出的高度值相乘，
	    意味着，
	    高度越高，纹理颜色会越亮（或越深，取决于纹理颜色的初始亮度）
	    这是一个简单的，颜色调制过程，
	    用于，根据高度信息，改变纹理的视觉效果。`
	textureColor.rgb *= height;
	
	
	`gl_FragColor：这是GLSL内置的输出变量，用于存储片元的最终颜色，将用于渲染到屏幕上`
	gl_FragColor = textureColor;
}