apple-cards.js

// Create a plane, and pass that through to our shaders
let geometry = new THREE.PlaneGeometry(600, 600, 100, 100);
let material = new THREE.ShaderMaterial({
    // These uniform variables can be adjusted in JS and are passed into the shader
    // After that they are passed into the GPU and rendered. You can alter these values
    // and change them through the mesh i.e. mesh.material.uniforms.u_height.value = x
    uniforms: {
        u_lowColor: {type: 'v3', value: low },
        u_highColor: {type: 'v3', value: high },
        u_time: {type: 'f', value: 0},
        u_height: {type: 'f', value: 1},
        u_rand: {type: 'f', value: new THREE.Vector2(randomInteger(6, 10), randomInteger(8, 10)) }
    },
    // These two are links to our fragment and vertex shaders
    // See full code for more details
    fragmentShader: noise + fragment,
    vertexShader: noise + vertex,
});

// Create the mesh and position appropriately
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -300);
scene.add(mesh);