* {
  margin: 0;
}

function monkeySaddle(u, v, out) {
  var x = (u - 0.5) * 2;
  var y = (v - 0.5) * 2;
  var z = x ** 3 - 3 * x * y ** 2;
  out.set(x, y, z);
}

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight,
  0.1, 1000
);

camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.ParametricGeometry(monkeySaddle, 25, 25);

var material = new THREE.ShaderMaterial({

  uniforms: {},

  vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }`,

  fragmentShader: `
      varying vec2 vUv;
      void main() {
        gl_FragColor = vec4(vUv, 0.0, 1.0);
      }`
});

var monkey = new THREE.Mesh(geometry, material);
scene.add(monkey);

var animate = function () {
  requestAnimationFrame(animate);
  monkey.rotation.x += 0.01;
  monkey.rotation.y += 0.01;
  // monkey.rotation.z += 0.01;
  renderer.render(scene, camera);
};

animate();