PROWAREtech

articles » current » javascript » three-js » egg-geometry

ThreeJS: Create an Egg

How to create a 3D egg object/geometry/mesh using the THREE.js LatheGeometry.

An egg is a complex shape to form. In the below function, the egg's shape can be changed by modifying the girth variable by only slight amounts unless looking for a shape other than an egg.


var createEgg = function () {
	var arr = [], girth = 0.719, apex = girth * 0.111111111; // fine-tune girth value

	for (var rad = 0; rad <= Math.PI; rad += 0.1047) { // 0.1047 radians == 6 degrees
		var v = new THREE.Vector2((apex * Math.cos(rad) + girth) * Math.sin(rad), - Math.cos(rad));
		arr.push(v);
	}

	return new THREE.Mesh(
		new THREE.LatheGeometry(arr, 24),
		new THREE.MeshLambertMaterial({ color: 0xF0EAD6 }) // NOTE: natural eggshell is #F0EAD6
	);
};

Here is a working example:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>An Egg</title>
	<style>
		canvas {
			display: block;
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<canvas></canvas>
	<script src="/js/three.min.js"></script>
	<script type="text/javascript">

(function () {

	var createEgg = function () {
		var arr = [], girth = 0.719, apex = girth * 0.111111111; // fine-tune girth value

		for (var rad = 0; rad <= Math.PI; rad += 0.1047) { // 0.1047 radians == 6 degrees
			var v = new THREE.Vector2((apex * Math.cos(rad) + girth) * Math.sin(rad), - Math.cos(rad));
			arr.push(v);
		}

		return new THREE.Mesh(
			new THREE.LatheGeometry(arr, 24),
			new THREE.MeshLambertMaterial({ color: 0xF0EAD6 }) // NOTE: natural eggshell is #F0EAD6
		);
	};

	var canvas = document.getElementsByTagName("canvas")[0];

	// NOTE: create the scene to place objects in
	var scene = new THREE.Scene();
	scene.background = new THREE.Color(0x6699CC); // NOTE: make the background blue for the sky
	scene.matrixWorldAutoUpdate = true;



	// NOTE: the width and height of the canvas
	var size = {
		width: canvas.offsetWidth,
		height: canvas.offsetHeight
	};


	var cameraNear = 1, cameraFar = 5000;
	// NOTE: create the camera with 53 degree field of view; this is how the scene is viewed by the user
	var camera = new THREE.PerspectiveCamera(53, size.width / size.height, cameraNear, cameraFar);

	// NOTE: position the camera in space a bit
	camera.position.z = 3;


	var renderer = new THREE.WebGLRenderer({
		canvas: canvas,
		antialias: true
	});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(size.width, size.height);
	renderer.render(scene, camera);


	var light = new THREE.DirectionalLight(0xffffff, 1);
	light.position.set(2, 2, 2);
	scene.add(light);
	scene.add(new THREE.AmbientLight(0xffffff, .3)); // NOTE: add a touch of ambient light

	var egg = createEgg();

	scene.add(egg);

	// NOTE: MUST HAVE AN ANIMATE FUNCTION
	var animate = function () {

		renderer.render(scene, camera);
		requestAnimationFrame(animate);
	};
	animate();

})();

	</script>
</body>
</html>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE