WebGL TEST!

 

I've just tried to implement a 3D object into my website so I'm trying to learn using WebGL API.

I'm using:

Other Interesting WebGL projects:

 

Three.js TEST!

 

I've found Three.js library which makes easier to create 3D object in browser.


var geometry = new THREE.IcosahedronGeometry();
var material = new THREE.MeshNormalMaterial();
var Icosahedron = new THREE.Mesh( geometry, material );
scene.add( Icosahedron );

 

My code:


class ThreeObj extends myObject {

  constructor( width, height, scenecontainer, settingsdiv ) {
    super(null);
    
    this.objectname = 'ThreeObj';
    this.objectversion = '1.0.1';
    
    this.scene = null;
    this.camera = null;
    this.renderer = null;

    this.width = width;
    this.height = height;
    this.scenecontainer = document.getElementById(scenecontainer);
    this.settingsdiv = document.getElementById(settingsdiv);
    this.myobjects = [];
  }

  main() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera( 75, this.width/this.height, 0.1, 1000 );
    this.camera.position.z = 5;

    this.renderer = new THREE.WebGLRenderer({ alpha: true });
    this.renderer.setSize( this.width, this.height );
    this.scenecontainer.appendChild( this.renderer.domElement );
    this.settingsdiv.appendChild( 
        new Switch(this, 'tch', 'Change Object to', false, "Icosahedron", "Lathe").GenerateCode()
    );
    
    this.myobjects = this.myobjects.concat( new myIcosa( this, this.scene, true ) );
            
    requestAnimationFrame( render );
  }

  animate() {
    this.myobjects.forEach( function( item, id ) {
        var sign = ((id%2)==0 ? 1 : -1 );
        item.rotate( sign * 0.01, sign * 0.02, sign * 0.01 );
    } );
    this.renderer.render( this.scene, this.camera );
  };

    
  UpdateandRedraw() {
    var currentobjectname = this.myobjects[0].getObjectName();
    for (var i=0; i<this.myobjects.length; i++) { 
        this.myobjects[i].remove();
        delete this.myobjects[i];
    }
    delete this.myobjects;
    this.myobjects = [];
    
    if ( currentobjectname == 'myLathe' ) {
        this.myobjects = this.myobjects.concat( new myIcosa( this, this.scene, true ) );
    }
    else {
        this.myobjects = this.myobjects.concat( new myLathe( this, this.scene, true ) );
        this.myobjects = this.myobjects.concat( new myTetra( this, this.scene, true ) );
        this.myobjects = this.myobjects.concat( new myCube( this, this.scene, true ) );
    }
  }
};

...

class myIcosa extends my3dObject {
    constructor( parent, scene, drawedges ) {
        super( parent, scene, 'THREE.IcosahedronGeometry', 'THREE.MeshNormalMaterial', drawedges );
        this.objectname = 'myIcosa';
        this.objectversion = '1.0.1';

        this.scale(3,3,3);
    }
}

class myLathe extends my3dObject {
    constructor( parent, scene, drawedges ) {
        super( parent, scene, 'myLatheGeometry', 'THREE.MeshNormalMaterial', drawedges );
        this.objectname = 'myLathe';
        this.objectversion = '1.0.1';

        this.obj.material.side = THREE.DoubleSide;
        this.scale(.8,.8,.8);
        this.translate(1,1,1);
    }
}

class myTetra extends my3dObject {
    constructor( parent, scene, drawedges ) {
        super( parent, scene, 'THREE.TetrahedronGeometry', 'THREE.MeshNormalMaterial', drawedges );
        this.objectname = 'myTetra';
        this.objectversion = '1.0.1';
    }
}