JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
JavaScript
/*
Three.js "tutorials by example"
Author: Lee Stemkoski
Date: July 2013 (three.js v59dev)
*/
// MAIN
var old = false;
var orbit = true;
// standard global variables
var container, scene, camera, renderer, controls;
function zFunc(x, y) {
return Math.sin(Math.sqrt(((a*Math.pow(x,2))+(b*Math.pow(y,2)))));
};
// parameters for the equations
var a = 1, b = 1, c = 1, d = 1;
var meshFunction;
var segments = 40,
xMin = -10, xMax = 10, xRange = xMax - xMin,
yMin = -10, yMax = 10, yRange = yMax - yMin,
zMin = -10, zMax = 10, zRange = zMax - zMin;
var graphGeometry;
var wireMaterial;
var graphMesh;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(-0.14842383563518524,-0.9416266879429751,0.30217469379298123);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer( {antialias:false} );
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// CONTROLS
if (orbit) {
controls = new THREE.OrbitControls( camera, renderer.domElement );
}
else {
controls = new THREE.TrackballControls( camera, renderer.domElement );
}
var xy_grid = createAGrid({
height: 10,
width: 20,
linesHeight: 10,
linesWidth: 10,
color: "red"
});
xy_grid.position.z = -10;
var yz_grid = createAGrid({
height: 10,
width: 10,
linesHeight: 10,
linesWidth: 10,
color: "green"
});
yz_grid.rotation.x = Math.PI/2;
yz_grid.position.y = -20;
var zx_grid = createAGrid({
height: 10,
width: 20,
linesHeight: 10,
linesWidth: 10,
...