Make custom geometry in three.js

Make custom geometry in three.js

Geometry is one of the basic building blocks of working in 3D. You can think of geometry as “shapes” such as circles, rectangles, squares, cylinders. Three.js comes with a range of predefined geometric shapes that you can use to get started. But even if you plan to use a lot of predefined geometry in your project, it’s good to understand what geometry is and how it is created.

Geometry is made up of vertices. These are coordinates in 3D, so the origin point is 0,0,0. We usually refer to these coordinates as x, y, z. A single coordinate is called a vertex.

Imagine a line in 3D space from 0,0,0 to 0,0,1. Is this line 3D? Not really, although if we rendered this line as a geometry we could see it in the 3d viewer. However we could only see it when looking it from a perspective above or below it, if we were to line it up perfectly with our view, it would disappear because it actually only has 2 dimensions.

A more interesting experiment would be to use 3 vertices, which now allows us to create a face between them. For instance this combination would draw a triangle:

  • 0,0,0
  • 0,1,0
  • 0,0,1

Leave a Reply

Your email address will not be published. Required fields are marked *

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

admin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

admin