Question

106

Custom shapes in Three.js

rated 0 times [ 109] [ 3] / answers: 1 / hits: 18545 / 13 Years ago, sun, november 27, 2011, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

korbindarrionh

Add To Favorites

Follow

Total Points: 598

Total Questions: 113

Total Answers: 104

Location: Burundi

Member since Wed, Nov 25, 2020

4 Years ago

answered 13 Years ago mustafaericho · Accepted Answer

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