javascript - Three.js - Custom Shapes?

Question

I am new to the three.js...so far came to a point where I can create shapes and scene & play with the camera view.

In my project the shapes I created are spheres and I used image as texture for material....

My question is how to make a custom shape (not sphere,rectangle...)? For example how can I create half sphere?

My code for now:

            // create texture
    texture = THREE.ImageUtils.loadTexture('red.png');      

    // create a sphere shape        
    geometry = new THREE.SphereGeometry( 50, 16, 16 );

    // give a shape red color
    material = new THREE.MeshLambertMaterial({map: texture});   

    // create an object
    mesh = new THREE.Mesh( geometry, material );

Answer 1

There are multiple ways to use geometry in three.js, from exporting models via a 3D editor (like Blender, for which a nice three.js exporter already exists ), to creating geometry from scratch.

One way would by to create instance of THREE.Geometry and add vertices, then work out how those connect to add face indices, but this not an easy way to do it. I would suggest starting with the existing geometries(found in the extras/geometries package) like THREE.CubeGeometry,THREE.CylinderGeometry,THREE.IcosahedronGeometry,THREE.OctahedronGeometry, etc.)

Additionally there are some really nice classes that allow you to generate extrusions(THREE.ExtrudeGeometry) and lathes(THREE.LatheGeometry). For extrusions see this example.

You mentioned creating half a sphere. That's an ideal candidate for using LatheGeometry. All you need to do is create a half-circle path (as an array of Vector3 instances) and pass that to the lathe so it revolves the half-circle into 3D - a half sphere. Here's an example:

var pts = [];//points array - the path profile points will be stored here
var detail = .1;//half-circle detail - how many angle increments will be used to generate points
var radius = 200;//radius for half_sphere
for(var angle = 0.0; angle < Math.PI ; angle+= detail)//loop from 0.0 radians to PI (0 - 180 degrees)
    pts.push(new THREE.Vector3(Math.cos(angle) * radius,0,Math.sin(angle) * radius));//angle/radius to x,z
geometry = new THREE.LatheGeometry( pts, 12 );//create the lathe with 12 radial repetitions of the profile

Plug that geometry into your mesh and Bob's you uncle!

Optionally you can centre the mesh/pivot using GeometryUtils:

THREE.GeometryUtils.center(geometry);

Have fun!