ThingOrigin.js

案例展示 ​

自定义着色器效果

<template>
  <div id="TO"></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  let TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
    helper: {
      axes: {
        active: false,
      },
      grid: {
        active: false,
      },
    }
  })

  //顶点着色器代码片段（在下面创建着色器材质时，作为参数传入）
    var vertexShader = `
      varying vec2 v_Uv;    //顶点纹理坐标
      void main () {
        v_Uv = uv;
        gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
      }
    `

    //片元着色器代码片段（RGBA分量操作,在下面创建着色器材质时，作为参数传入）
    var fragmentShader = `uniform sampler2D e_Texture;
      varying vec2 v_Uv;
      void main () {
        vec4 textureColor = texture2D( e_Texture, v_Uv );
        float green = textureColor.g * 0.0;     //修改颜色值的绿色（G）分量为0
        gl_FragColor = vec4(textureColor.r, green, textureColor.b, 1.0);
      }`

    //加载贴图纹理图像
    var earthTexture = TO.material.initBasicTexture( `${import.meta.env.BASE_URL}img/materials/earth-light.png`)

    //创建着色器材质
    var shaderMaterial = TO.material.initShaderMaterial(
        {
            e_Texture: {
                value: earthTexture   //纹理图像
            }
        },
        vertexShader,
        fragmentShader
    )
    let model = TO.model.initSphere({
        position: {
            x: 0,
            y: 0,
            z: 0,
        },
        scale: {
            x: 3,
            y: 3,
            z: 3,
        }
    });
    model.material = shaderMaterial;
    TO.scene.add(model);
});


</script>

<style scoped>
#TO {
  width: 100%;
  height: 400px;
  position: relative;
}
</style>

API 介绍 ​

material.initShaderMaterial ​

方法签名返回值描述
initShaderMaterial(uniforms: { [p: string]: IUniform<any> }, vertexShader: string, fragmentShader: string)ShaderMaterial创建着色器材质

参数说明：

参数名类型是否必选描述
uniforms{ [p: string]: IUniform<any> }是Uniforms 变量
vertexShaderstring是顶点着色器的 GLSL 代码
fragmentShaderstring是片元着色器的 GLSL 代码