7

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);
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
BorisD
  • 2,231
  • 5
  • 25
  • 35

1 Answers1

20

There are multiple ways to use geometry in Three.js, from importing models that were exported via a 3D editor (e.g. Blender), 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);
XåpplI'-I0llwlg'I -
  • 21,649
  • 28
  • 102
  • 151
George Profenza
  • 50,687
  • 19
  • 144
  • 218
  • 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? – BorisD Nov 27 '11 at 10:42
  • 2
    Glad it helps. Whenever I want to do something with three.js I check if there's an example already :) [webgl_interactive_draggablecubes](http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html) 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 Nov 27 '11 at 11:00
  • 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. – George Profenza Nov 27 '11 at 11:01
  • I am always trying to find some three.js solutions...but there are not many. now I'm looking at this on : http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes_tween.html...I want to do something similar,but not to randomally rotate the cubes...I want to know what object was clicked and to drag it – BorisD Nov 27 '11 at 11:36
  • Use the [draggable cubes](http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html) 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! – George Profenza Nov 27 '11 at 12:08