mix混入函数

Posted 2023-04-26 aichitudousien

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mix混入函数相关的知识，希望对你有一定的参考价值。

概述

概述

记录一下使用mix函数的过程，公式为：
mix(x, y, a): x, y的线性混叠， x(1-a) + y*a; a为0 结果为x, a为1 结果为y
先看代码

let shader = 
    vs: `
      varying vec2 v_uv;
      void main() 
        v_uv = uv;
        gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
      
        `,
    fs: `
      varying vec2 v_uv;
      vec3 colorA = vec3(0.0,0.0,1.0);
      vec3 colorB = vec3(1.0,0.0,0.0);
      void main() 
        // mix(x, y, a): x, y的线性混叠， x(1-a) + y*a;  a为0 结果为x, a为1 结果为y
        vec3 color = mix(colorA, colorB, v_uv.x);
        gl_FragColor = vec4(color, 1.0);
      
        `,
    uniform: 
    
  

  let geometry = new THREE.PlaneBufferGeometry(20, 20);

  let material = new THREE.ShaderMaterial(
    vertexShader: shader.vs,
    fragmentShader: shader.fs,
    uniforms: shader.uniform,
    transparent: true,
    side: THREE.DoubleSide
  )

  let mesh = new THREE.Mesh(geometry, material);
  mesh.rotateX(-Math.PI / 2);
  scene.add(mesh);

最后的效果为：

设计模式：混入模式

第一次完整看一遍（JavaScript设计模式）该模式的介绍，感觉这不就是继承而已吗，只不过可能是部分继承。

混入（Mixin）模式

定义：

Mixin是可以轻松被一个子类或一组子类继承功能的类，目的是函数复用。继承Mixin是扩展功能的方式，另外也可能从多个Mixin类进行继承。

继承方式：

这个模式关键点在于继承，JavaScript上有几种实现继承的方式：

1. 原型继承

function A(){
     this.name = "A";
}
function B(){
}
B.prototype= new A();
var b = new B();
console.log(b instanceof A);     //true
console.log(b instanceof B);     //true

PS：无法实现多继承。

2. 拷贝继承

function extend(receiveClass, givingClass){
     for(var key in givingClass.prototype){
           receiveClass.prototype[key] = givingClass.prototype[key];
      }
}
function A(){
}
A.prototype.hello = function(){
     console.log("hello");
}
function B(){
}
extend(B, A);
var b = new B();
console.log(b instanceof A);     //false
console.log(b instanceof B);     //true

PS：支持多继承，但效率低。

3. 构造继承

function A1(){
     this.name = "A";
}
function A2(){
     this.age = 18;
}
function B(){
     A1.call(this);
     A2.call(this);
     this.desc =  "Test";
}
var b = new B();
console.log(b instanceof A);     //false
console.log(b instanceof B);     //true

PS：支持多继承

4. 实例继承

function A(){
     this.name = "A";
}
function B(){
     var instance = new A();
     instance.desc = "Test";
     return instance;
}
var b = new B();
console.log(b instanceof A);     //true
console.log(b instanceof B);     //false

PS：这种方式我觉得很糟糕，生成的对象本质是父类的实例，不是子类的对象，当然也不支持多继承。

例子：

// Define a simple Car constructor
var Car = function ( settings ) {
    this.model = settings.model || "no model provided";
    this.color = settings.color || "no colour provided";
};
// Mixin
var Mixin = function () {};
Mixin.prototype = {
    driveForward: function () {
        console.log( "drive forward" );
    },
    driveBackward: function () {
        console.log( "drive backward" );
    },
    driveSideways: function () {
        console.log( "drive sideways" );
    }
};
// Extend an existing object with a method from another
function augment( receivingClass, givingClass ) {
    // only provide certain methods
    if ( arguments[2] ) {
        for ( var i = 2, len = arguments.length; i < len; i++ ) {
            receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
        }
    }
    else {
        for ( var methodName in givingClass.prototype ) {
            if ( !Object.hasOwnProperty.call(receivingClass.prototype, methodName) ) {
                receivingClass.prototype[methodName] = givingClass.prototype[methodName];
            }
        }
    }
}
 
augment( Car, Mixin, "driveForward", "driveBackward" );
var myCar = new Car({
    model: "Ford Escort",
    color: "blue"
});
myCar.driveForward();
myCar.driveBackward();
 
augment( Car, Mixin );
var mySportsCar = new Car({
    model: "Porsche",
    color: "red"
});
mySportsCar.driveSideways();