O'Reilly logo

Learning Three.js: The JavaScript 3D Library for WebGL by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rendering and viewing a 3D object

In this step you'll create your first scene and add a couple of objects and a camera. Our first example will contain the following objects:

Object

Description

Plane

A two-dimensional rectangle that serves as our ground area. This is rendered as the gray rectangle in the middle of the scene.

Cube

A three-dimensional cube, which we'll render in red

Sphere

A three-dimensional sphere, which we'll render in blue

Camera

The camera determines what you'll see in the output

Axes

x, y, and z axes. This is a helpful debugging tool to see where the objects are rendered.

I'll first show you how this looks in code (the source file with comments can be found in the chapter-01 folder and is labeled 02-first-scene.html ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required