Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By : Jos Dirksen
Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By: Jos Dirksen

Overview of this book

Table of Contents (20 chapters)
Learning Three.js – the JavaScript 3D Library for WebGL Second Edition
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
8
Creating and Loading Advanced Meshes and Geometries
Index

Geometries and meshes


In each of the examples until now, you've seen geometries and meshes being used. For instance, to add a sphere to the scene, we did the following:

var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff);
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

We defined the shape of the object and its geometry (THREE.SphereGeometry), we defined what this object looks like (THREE.MeshBasicMaterial) and its material, and we combined these two in a mesh (THREE.Mesh) that can be added to a scene. In this section, we'll take a closer look at what a geometry is and what a mesh is. We'll start with the geometry.

The properties and functions of a geometry

Three.js comes with a large set of geometries out of the box that you can use in your 3D scene. Just add a material, create a mesh, and you're pretty much done. The following screenshot, from example 04-geometries, shows a couple of the standard geometries...