Three js geometry cone examples

When it comes to three js geometry there are a number of built in constructors that can be used to make most basic shapes. One of these is the cone geometry constructor.

1 - This is a post on three js

this is a post on a built in geometry constructor in three js that can be used with a bunch of other features in three js to make a cone shape. This is not a getting started post on three js let alone javaScript in general so I assume that you have at least some exposure with three js.

2 - Three js geometry cone basic example

The cone Geometry constructor can accept a few arguments. However just the first two are the most important when it comes to a basic example at least. The first one is the radius of the base of the cone and then second is the height or length of the cone from the base to the tip.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
(function () {
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(50, 4 / 3, .5, 1000);
camera.position.set(8, 8, 8);
camera.lookAt(0, 0, 0);
// LIGHT
scene.add(camera);
var light = new THREE.PointLight(0xffffff);
camera.add(light);
// CONE
var cone = new THREE.ConeGeometry(1, 7),
matreial = new THREE.MeshStandardMaterial({
color: 0x00ff00
}),
mesh = new THREE.Mesh(cone, matreial);
scene.add(mesh);
// RENDER
var renderer = new THREE.WebGLRenderer();
renderer.setSize(320, 240);
document.getElementById('demo').appendChild(renderer.domElement);
renderer.render(scene, camera);
}
());

3 - making a half cone

To make a half cone I just need to use the last to arguments that are given to the cone geometry constructor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// CONE
var radius = 1,
height = 5,
radSegs = 4,
hightSegs = 1;
var cone = new THREE.ConeGeometry(
1, // radius
5, // height
4, //radial segments,
1, // height segments
false,
0, // start angle
Math.PI // angle length from start
);
matreial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
side: THREE.DoubleSide
}),
mesh = new THREE.Mesh(cone, matreial);
scene.add(mesh);