Custom shapes in Three.js

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);

Solution

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);

Comments

[BorisD]

Thanks mate...I can see you know what you talking about...so do you have an idea how can I make the objects draggable? I saw some examples and found it got to do with Three.Ray...You know something about it?

[George Profenza]

Glad it helps. Whenever I want to do something with three.js I check if there's an example already :) webgl_interactive_draggablecubes is the place to start. You need to use the mouseup/mousedown/mousemove listeners. The idea is the mouse 2D coordinates are converted to 3D based on the camera and a ray is 'shot' through space in depth. Then there's a test to check if there's any objects on that ray/line(any intersections), if so, SELECTED is set to the 1st object in the list (if any)..etc

[George Profenza]

long story short, if you copy those 3 listeners into your project and have the SELECTED and INTERSECTED and projector variables at the top, it should work in your file as well.

[BorisD]

I am always trying to find some three.js solutions...but there are not many. now I'm looking at this on : mrdoob.github.com/three.js/examples/… want to do something similar,but not to randomally rotate the cubes...I want to know what object was clicked and to drag it

[George Profenza]

Use the draggable cubes one: it's exactly what you need. If it's a problem that it's WebGL, simply change the renderer: renderer = new THREE.CanvasRenderer();//new THREE.WebGLRenderer( { antialias: true } ); Won't look as pretty, but it works. Goodluck!