Three.js - Geometries

We have a set of different 3D objects we can place into our scene. For a better handling we are always using the same construct:

• geometry: the object's geometry like cube, sphere, etc
• material: the material/color, see materials
• creating the object mit new TREE.Mesh()
• positioning, rotation, etc
• add object to scene

 
    //cube
    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh( geometry, material );
    cube.position.set(4,4,0.5)
    scene.add( cube );

Geometries

Plane

    //plane
    var geometry = new THREE.PlaneGeometry(10, 10)
    var material = new THREE.MeshBasicMaterial( { color: 0x666666 } );
    var plane = new THREE.Mesh( geometry, material );
    scene.add(plane);

Cube

    //cube
    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

Sphere

    //sphere
    //SphereGeometry(RADIUS,SEGMENTWIDTH,SEGMENTHEIGHT)
    var geometry = new THREE.SphereGeometry(1, 100, 100);
    var material = new THREE.MeshNormalMaterial();
    var sphere = new THREE.Mesh( geometry, material );
    scene.add( sphere );

Cylinder/Cone

    //cylinder
    //CylinderGeometry(BOTTOMRADIUS,TOPRADIUS,HEIGHT,SEGMENTRADIUS,SEGMENTHEIGHT,BUTTOM)
    var geometry = new THREE.CylinderGeometry(1, 0.5, 2, 50, 50, false)
    var material = new THREE.MeshNormalMaterial();
    var cylinder = new THREE.Mesh( geometry, material );
    cylinder.rotation.x = Math.PI / 2;
    scene.add( cylinder );

For more shapes check this out: http://stemkoski.github.io/Three.js/Shapes.html