Three.js使用shader根据高度渐变染色_three.js shader流动

使用shader根据高度渐变染色

在项目中遇到一个对地形图染色的需求，根据高度对地形进行染色。以下测试代码为学习痕迹。
GLSL代码，uniform float interval参数表示，间隔高度，即每隔interval，在不同色系渐变。
      const vertexShaderReplacements = `
    precision highp float;
    varying vec3 fPosition;
    varying vec2 vUv;
    void main()
      vec4 pos = modelViewMatrix * vec4(position, 1.0);
      gl_Position = projectionMatrix * pos;
      fPosition = (modelMatrix * vec4(position, 1.0)).xyz;
      vUv = uv;
      const fragmentShaderReplacements = `
    precision highp float;
    uniform float time;
    varying vec3 fPosition;
    varying vec2 vUv;
    uniform float interval;
    void d_color() {
      float dataY = fPosition.y;
      float dataI = interval;
      if (dataY <= -dataI) {
        // 蓝色-蓝绿
        // 0,0,1 -> 0,1,1
        gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
      } else if (dataY > -dataI && dataY <= 0.0) {
        float g = 1.0 - (-dataY / dataI);
        gl_FragColor = vec4(0.0, g, 1.0, 1.0);
      } else if (dataY > 0.0 && dataY <= dataI) {
        // 蓝绿-绿
        // 0,1,1 -> 0,1,0
        float g = 1.0 - dataY / dataI;
        gl_FragColor = vec4(0.0, 1.0, g, 1.0);
      } else if (dataY > dataI && dataY <= 2.0 * dataI) {
        // 绿-浅绿
        // 0,1,0 -> 0.5,1,0
        float r = 0.5 * ((dataY - dataI) / dataI);
        gl_FragColor = vec4(r, 1.0, 0.0, 1.0);
      } else if (dataY > 2.0 * dataI && dataY <= 3.0 * dataI) {
        // 浅绿-黄
        // 0.5,1,0 -> 1,1,0
        float r = 0.5 + ((dataY - 2.0 * dataI) / dataI) * 0.5;
        gl_FragColor = vec4(r, 1.0, 0.0, 1.0);
      } else if (dataY > 3.0 * dataI && dataY <= 4.0 * dataI) {
        // 黄-土黄
        // 1,1,0 -> 1,0.76,0
        float g = 1.0 - ((dataY - 3.0 * dataI) / dataI) * (1.0 - 0.76);
        gl_FragColor = vec4(1.0, g, 0.0, 1.0);
      } else if (dataY > 4.0 * dataI && dataY <= 5.0 * dataI) {
        // 土黄-橙
        // 1,0.76,0 -> 1,0.58,0
        float g = 0.76 - ((dataY -  4.0 * dataI) / dataI) * (0.76 - 0.58);
        gl_FragColor = vec4(1.0, g, 0.0, 1.0);
      } else if (dataY > 5.0 * dataI && dataY <= 6.0 * dataI) {
        // 橙-红
        // 1,0.58,0 -> 1,0,0
        float g = 0.58 - ((dataY - 5.0 * dataI) / dataI) * 0.58;
        gl_FragColor = vec4(1.0, g, 0.0, 1.0);
      } else {
        // 1.0,0.0,0.0
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    void main(){
      d_color();
完整的测试代码 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
    </style>
    <script src="../three.js-master/build/three.js"></script>
    <script src="../three.js-master/examples/js/controls/OrbitControls.js"></script>
  </head>
    <script>
       * 创建场景对象Scene
      var scene = new THREE.Scene();
      const vertexShaderReplacements = `
    precision highp float;
    varying vec3 fPosition;
    varying vec2 vUv;
    void main()
      vec4 pos = modelViewMatrix * vec4(position, 1.0);
      gl_Position = projectionMatrix * pos;
      fPosition = (modelMatrix * vec4(position, 1.0)).xyz;
      vUv = uv;
      const fragmentShaderReplacements = `
    precision highp float;
    uniform float time;
    varying vec3 fPosition;
    varying vec2 vUv;
    uniform float interval;
    void d_color() {
      float dataY = fPosition.y;
      float dataI = interval;
      if (dataY <= -dataI) {
        // 蓝色-蓝绿
        // 0,0,1 -> 0,1,1
        gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
      } else if (dataY > -dataI && dataY <= 0.0) {
        float g = 1.0 - (-dataY / dataI);
        gl_FragColor = vec4(0.0, g, 1.0, 1.0);
      } else if (dataY > 0.0 && dataY <= dataI) {
        // 蓝绿-绿
        // 0,1,1 -> 0,1,0
        float g = 1.0 - dataY / dataI;
        gl_FragColor = vec4(0.0, 1.0, g, 1.0);
      } else if (dataY > dataI && dataY <= 2.0 * dataI) {
        // 绿-浅绿
        // 0,1,0 -> 0.5,1,0
        float r = 0.5 * ((dataY - dataI) / dataI);
        gl_FragColor = vec4(r, 1.0, 0.0, 1.0);
      } else if (dataY > 2.0 * dataI && dataY <= 3.0 * dataI) {
        // 浅绿-黄
        // 0.5,1,0 -> 1,1,0
        float r = 0.5 + ((dataY - 2.0 * dataI) / dataI) * 0.5;
        gl_FragColor = vec4(r, 1.0, 0.0, 1.0);
      } else if (dataY > 3.0 * dataI && dataY <= 4.0 * dataI) {
        // 黄-土黄
        // 1,1,0 -> 1,0.76,0
        float g = 1.0 - ((dataY - 3.0 * dataI) / dataI) * (1.0 - 0.76);
        gl_FragColor = vec4(1.0, g, 0.0, 1.0);
      } else if (dataY > 4.0 * dataI && dataY <= 5.0 * dataI) {
        // 土黄-橙
        // 1,0.76,0 -> 1,0.58,0
        float g = 0.76 - ((dataY -  4.0 * dataI) / dataI) * (0.76 - 0.58);
        gl_FragColor = vec4(1.0, g, 0.0, 1.0);
      } else if (dataY > 5.0 * dataI && dataY <= 6.0 * dataI) {
        // 橙-红
        // 1,0.58,0 -> 1,0,0
        float g = 0.58 - ((dataY - 5.0 * dataI) / dataI) * 0.58;
        gl_FragColor = vec4(1.0, g, 0.0, 1.0);
      } else {
        // 1.0,0.0,0.0
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    void main(){
      d_color();
    }`;
      var geometry = new THREE.PlaneGeometry(30, 200);
      let uniforms = {
        interval: {
          type: "f",
          value: 25.0,
      var material = new THREE.ShaderMaterial({
        // wireframe: true,
        side: THREE.DoubleSide,
        uniforms: uniforms,
        vertexShader: vertexShaderReplacements,
        fragmentShader: fragmentShaderReplacements,
      });
      const plane = new THREE.Mesh(geometry, material);
      plane.position.set(15, 80);
      scene.add(plane);
      // 平行光
      directionalLight = new THREE.DirectionalLight(0xffffff);
      // 平行光配置
      directionalLight.position.set(-40, 60, -10);
      directionalLight.castShadow = true;
      directionalLight.shadow.camera.near = 20;
      directionalLight.shadow.camera.far = 200;
      directionalLight.shadow.camera.left = -50;
      directionalLight.shadow.camera.right = 50;
      directionalLight.shadow.camera.top = 50;
      directionalLight.shadow.camera.bottom = -50;
      // 距离和强度
      directionalLight.distance = 0;
      directionalLight.intensity = 0.5;
      // 设置阴影的分辨率
      directionalLight.shadow.mapSize.width = 1024;
      directionalLight.shadow.mapSize.height = 1024;
      scene.add(directionalLight);
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);
      // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
      var axisHelper = new THREE.AxesHelper(250);
      scene.add(axisHelper);
      const cameraHelper = new THREE.CameraHelper(
        directionalLight.shadow.camera
      // scene.add(cameraHelper);
       * 相机设置
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(200, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
       * 创建渲染器对象
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      renderer.shadowMap.enabled = true;
      //执行渲染操作   指定场景、相机作为参数
      // renderer.render(scene, camera);
      function render() {
        renderer.render(scene, camera); //执行渲染操作
        // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render); //请求再次执行渲染函数render
      render();
      var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
    </script>
  </body>
</html>
    <meta charset="UTF-8">
    <title>eg18-2: Three.js 旋转的盒子(重构)--加入阴影</title>
    <script src="../js/three.js"></script>
    <script src="../js/WebGL.js"&.
shader是什么？
shader是一个用GLSL编写的小程序，也就是着色器语言，我们可以通过shader来编写顶点着色器和片元着色器，在WEBGL编程一书中 25-26页有详细说明
shader在Three.js中如何使用？
threejs提供了关于shader的材质 RawShaderMaterial 和 ShaderMaterial  两种编写shader的材质。
RawShaderMaterial：不内置uniforms和attributes
ShaderMaterial：内置一些需要的参数，
				什么是着色器？
实际上着色器是WebGL的主要组件之一。如果我们在没接触Three.js情况下开始学习WebGL，着色器将是我们首先且必须要学的知识，这也是为什么原生WebGL很难入门。
着色器是一种使用GLSL(OpenGL Shading Language)编写并在GPU上运行的程序。它们被用于定位几何体的每个顶点，并为该几何体的每个可见像素着色。使用“像素Pixel”来描述其实并不准确，因为渲染的每个点不一定与屏幕上的每个像素相匹配，因此我们更倾向于使用术语“片元fragment”。
之后我们会向着色
void main() {
  vec4 worldPosition = modelMatrix * vec4(position, 1.0);
  vWorldPosition = worldPosition.xyz;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
const smokeFragmentShader = `
uniform vec3 color;
uniform float opacity;
varying vec3 vWorldPosition;
void main() {
  float depth = gl_FragCoord.z / gl_FragCoord.w;
  float fogFactor = smoothstep(100.0, 300.0, depth);
  gl_FragColor = vec4(color, opacity) * fogFactor;
const smokeMaterial = new THREE.ShaderMaterial({
  uniforms: {
    color: { value: new THREE.Color(0xaaaaaa) },
    opacity: { value: 0.5 }
  vertexShader: smokeVertexShader,
  fragmentShader: smokeFragmentShader,
  transparent: true
const smokeGeometry = new THREE.PlaneGeometry(1000, 1000);
const smokeMesh = new THREE.Mesh(smokeGeometry, smokeMaterial);
smokeMesh.position.set(0, 0, -500);
scene.add(smokeMesh);
这个 shader 通过计算深度值来模拟烟雾效果。在顶点着色器中，我们通过将顶点位置乘以模型矩阵得到世界坐标系下的位置，然后将它传递给片元着色器。在片元着色器中，我们计算每个像素的深度值，并根据深度值计算烟雾因子，最后将它乘以颜色和不透明度来得到最终的颜色。
你可以根据需要调整烟雾的颜色、不透明度、大小和位置。  
### 回答2：
three.js是一个功能强大的JavaScript库，它提供了一套易于使用的工具和功能，用于在Web上创建交互式的3D图形。其中一个功能是烟雾shader，它允许我们在我们的场景中添加逼真的烟雾效果。
three.js的烟雾shader通过在场景中创建一个气体云层，并向其应用特定的效果来实现。这个效果通常是通过使用Perlin噪声来模拟烟雾的动态外观的。这种噪声会根据时间和空间的变化来生成一个连续的、无缝的云状图案。
通过使用three.js的ShaderMaterial和自定义着色器，我们可以将烟雾效果应用于物体或整个场景。使用这个材质，我们可以设置烟雾的颜色、透明度、密度等参数，以实现我们想要的效果。
烟雾shader可以使我们的场景更加生动和逼真。它可以在火焰、蒸汽机、爆炸等各种场景中添加真实的烟雾效果。在游戏开发、虚拟现实和建筑可视化等领域，烟雾shader都可以发挥重要的作用，提高用户体验和视觉效果。
尽管实现烟雾shader可能需要一些编程和图形学的知识，但由于three.js库已经提供了许多封装好的功能和模块，我们可以轻松地集成和使用它们。此外，three.js的官方文档和社区也提供了大量的教程和示例代码，帮助我们快速上手和理解相关概念。
总的来说，three.js的烟雾shader是一个强大的工具，它为我们提供了在Web上创建逼真烟雾效果的能力。它可以为我们的场景增加动态和真实感，提高用户体验和视觉效果。对于对3D图形感兴趣的开发者来说，three.js的烟雾shader是一个不可忽视的资源。