## Lesson 18 - Quadrics

#### Introduction

The quadrics example is very easy since three.js provides built-in quadrics support. However, as always, there are a couple of wrinkles so let's go over it briefly.

#### Initialization

We initialize the gfxScene object same as always. We also declare some global vars:

``````var quadTexture;
var	quadric;
var	quadGeometry;
var	quadMaterial;
var	materialType = 'p';	// texture, paint or wire
var	quadType = 'b';``````

Global variables are not good programming but this is a simple demo so we'll just hold our nose.

Then we call initDemo which is very simple:

``````quadTexture = new THREE.ImageUtils.loadTexture("images/clouds.jpg");

quadMaterial = makeMaterial(materialType);
quadric = makeQuad('0');

window.addEventListener("keydown", onDocumentKeyDown, false);``````

#### Changing Quadrics and Materials

Here's the code that creates the material for the quadric. We do it this way because we have to create a new material each time we change the type of quadric (though not vice-versa).

``````function makeMaterial ( matType ) {

materialType = matType;
if ( materialType == 't')
quadMat = new THREE.MeshPhongMaterial({ map:quadTexture, side:THREE.DoubleSide });
else if (materialType == 'w')
quadMat = new THREE.MeshBasicMaterial({ wireframe:true });
else
quadMat = new THREE.MeshLambertMaterial({ color: '#00abb1' });

return quadMat;
}``````

And here's the code that actually creates the quadrics. Again, we have to re-create the geometry that is the quadric each time we change the quadric type (but not if we are only changing the material).

``````function makeQuad( qType ) {

quadType = qType;

gfxScene.remove( quadric );

switch ( quadType ) {
case '0':
quadGeometry = new THREE.BoxGeometry(2.0, 2.0, 2.0);
break;
case '1':
quadGeometry = new THREE.CircleGeometry(2.0, 32);
break;
case '2':
quadGeometry = new THREE.CylinderGeometry(2.0, 2.0, 5, 32);
break;
case '3':
quadGeometry = new THREE.DodecahedronGeometry(2.0);
break;
case '4':
quadGeometry = new THREE.IcosahedronGeometry(2.0);
break;
case '5':
quadGeometry = new THREE.CylinderGeometry(0.0, 2.0, 5, 64);
break;
case '6':
quadGeometry = new THREE.OctahedronGeometry(2.0, 2.0, 2.0);
break;
case '7':
quadGeometry = new THREE.RingGeometry(0.5, 2.0, 32);
break;
case '8':
quadGeometry = new THREE.SphereGeometry(2.0, 32, 32);
break;
case '9':
quadGeometry = new THREE.TetrahedronGeometry(2.0);
break;
case 'a':
quadGeometry = new THREE.TorusGeometry(2.0, 0.5, 16, 100);
break;
case 'b':
quadGeometry = new THREE.TorusKnotGeometry(2.0, 0.5, 100, 16);

}

quad = new THREE.Mesh(quadGeometry, quadMaterial);
gfxScene.add(quad);

return quad;
}``````

#### Keyboard Handling

Finally, we handle the keystrokes and create the material and geometry:

``````function onDocumentKeyDown(event) {
var keyChar = String.fromCharCode(event.which);
keyChar = keyChar.toLowerCase();

var quadString = "0123456789ab";
var matString = "ptw";

if ( quadString.indexOf(keyChar) != -1) {
quadric = makeQuad(keyChar);
}
else if (matString.indexOf(keyChar) != -1) {
quadMaterial = makeMaterial(keyChar);
quadric = makeQuad(quadType);
}

// need to stop propagation of the event or the Reading System will probably take back the focus
event.stopPropagation();
}``````

And that's it! Click on this link to see the actual rendered demo in all it's quadric glory!

As always, the original sources are on github here.

About Us | Contact Us | ©2017 Geo-F/X