graph f(x) = -(x1/2) - (3*x2/2) in javascript

index.tsx
// First, include Three.js library script in our HTML file

// Create the scene, camera and renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// Define the function to graph
function f(x1, x2) {
  return -(x1/2) - (3*x2/2); // In this case it's a simple linear function of two variables
}

// Create the mesh that represents the surface of the function
var geometry = new THREE.ParametricGeometry( 
  function(x1, x2) { 
    return new THREE.Vector3(x1, x2, f(x1, x2)); // Construct Vector3 objects for each point (x1, x2, f(x1,x3))
  }, 
  100, 100 
);
var material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide, wireframe: true} );
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

// Position the camera so that it looks at the center of the mesh
camera.position.z = 5;

// Start the animation loop
function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
}
animate();
1190 chars
35 lines