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 = `
    attribute vec3 position;//position变量从PlaneBufferGeometry的position属性中获取顶点信息
    varying vec3 v_position;
    void main() {
      v_position = position;
      gl_Position = vec4( position, 1.0 );
    }
    `;
      //片元着色器代码
      var fragmentShader = `
    #ifdef GL_ES
    precision mediump float;
    #endif
    varying vec3 v_position;
    uniform float radius;
    void main( void ) {
      vec3 center = vec3(.0,.0,.0);
      float dist = distance(center,v_position);//计算中心到顶点的距离
      dist = clamp(dist,0.0,1.0);//将距离限制在0~1
      float color = 1.0 - dist;

      if(dist >radius-0.3&&dist < radius-0.28||dist >radius-0.4&&dist < radius-0.38){
        gl_FragColor = vec4(1.0*color,0.6*color,0.6*color,1.0);//绘制两层光圈
      }else{
        gl_FragColor = vec4(color*radius,0.0,0.0,1.0);//绘制底色
      }

    }`;

    //创建着色器材质
    var shaderMaterial = TO.material.initRawShaderMaterial(
    vertexShader,
    fragmentShader,
    {
        radius: {
            type: "f",
            value: 0.2,
        },
    }
    );
    // const planeMesh = TO.model.initPlane("plane", {
    //     width: 2,
    //     height: 2,
    // });
    let planeMesh = TO.model.initPlane({
        position: {
        x: -30,
        y: 5,
        z: 0,
        },

        material: {
        color: "#00ff00",
        },
    });
    planeMesh.material = shaderMaterial;
    TO.scene.add(planeMesh);

    setInterval(() => {
    //更新光圈半径
    planeMesh.material.uniforms["radius"].value += 1.0 / 60.0;
        if (planeMesh.material.uniforms.radius.value > 1) {
            planeMesh.material.uniforms.radius.value = 0;
        }
    }, 200);

});


</script>

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

API 介绍 ​

material.initRawShaderMaterial ​

方法签名返回值描述
initRawShaderMaterial(vertexShader: string, fragmentShader: string, uniforms?: { [p: string]: IUniform<any> }, vertexColors?: boolean, side?: number)RawShaderMaterial创建原始着色器材质

参数说明：

参数名类型是否必选默认值描述
vertexShaderstring是-顶点着色器的 GLSL 代码
fragmentShaderstring是-片元着色器的 GLSL 代码
uniforms{ [p: string]: IUniform<any> }否-Uniforms 变量
vertexColorsboolean否false定义是否使用顶点着色
sidenumber否0（正面）定义将要渲染哪一面：正面(0)，背面(1)，双面(2)