JSFiddle - React, Tailwind, and code Playground

by Cody Bennett

JavaScript

//var clock = new THREE.Clock();
var H=150;
var B=150;
var camLock = false;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.lookAt( -2.5, 2, 0.1 );

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

// Geometry
var cbgeometry = new THREE.PlaneGeometry( 500, 500, 8, 8 );

// Materials
var cbmaterials = []; 

cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide }) );
cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide }) );

var l = cbgeometry.faces.length / 2; // <-- Right here. This should still be 8x8 (64)

console.log("This should be 64: " + l);// Just for debugging puporses, make sure this is 64

for( var i = 0; i < l; i ++ ) {
    j = i * 2; // <-- Added this back so we can do every other 'face'
    cbgeometry.faces[ j ].materialIndex = ((i + Math.floor(i/8)) % 2); // The code here is changed, replacing all 'i's with 'j's. KEEP THE 8
    cbgeometry.faces[ j + 1 ].materialIndex = ((i + Math.floor(i/8)) % 2); // Add this line in, the material index should stay the same, we're just doing the other half of the same face
}

// Mesh
floor = new THREE.Mesh( cbgeometry, new THREE.MeshFaceMaterial( cbmaterials ) );
floor.rotation.x = Math.PI/2;
scene.add( floor );


var FizzyText = function() {
  // Sets up inital values for the sliders
  this.PyraBase = 150;
  this.PyraHeight = 150
  this.BoxRot = 0



}

var text = new FizzyText();
var gui = new dat.GUI();
var PyraBase = gui.add(text, 'PyraBase', 0, 300).step(5);
var PyraHeight = gui.add(text, 'PyraHeight', 0, 300).step(5);
var BoxRot = gui.add(text, 'BoxRot', 0, 360).step(10);



	
PyraBase.onChange(function(value) {
	PyraBase = value;
	B = value;
	
});
PyraHeight.onChange(function(value) {
	PyraHeight = value;
	H =...