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