Three.js - Custom Shapes?

Question

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

How can I make a custom shape (not sphere, rectangle, etc.)? For example, how can I create a halfsphere?

My code for now:

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

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

// give it 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, and 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 halfsphere.

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 your uncle!

Optionally, you can centre the mesh/pivot using GeometryUtils:

THREE.GeometryUtils.center(geometry);