How to create a basic 3D scene?

To create a basic scene we need to initialize a scene object. You can think of a scene as a stage that will hold your production. Everything that will be visible to the viewer will be added to the scene.

We need to add a camera object to the scene that will be our viewers perspective. Anything on the scene but not in the view of the camera won't be visible on your canvas.

We also need a light source for our objects to be visible.

Finally, we will create a basic shape(mesh), box.

Let's create the basic scene using different libraries.

BabylonJS Scene

Basic Scene with a cube

Overview

We will create our BabylonJS scene on Babylon Playground. Find out more about the editor on What is playground? chapter.

We will implement the 3D concepts we discussed in How to create a basic 3D scene? chapter.

BabylonJS Code

To create a basic BabylonJS scene, we initialize a scene, create camera, light and a mesh and return the scene object.

const createScene =  () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));

    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    return scene;
}

Scene object gets engine as the input argument. You don't have to worry about the engine when you are working on the playground but when you are working on your local code sample, we will create the engine as well.

Camera

Arc Rotate Camera acts like a satellite in orbit around a target and always points towards the target position. In our case, it is pointing towards the box. Where ever you move your camera, it will still point to towards the box.

Arc Rotate Camera parameters are: name you want to give to your camera, alpha(radians) the longitudinal rotation, beta beta (radians) the latitudinal rotation, radius(the distance from the target position), target position(center where the box will be created as a default), scene(optional argument). In this code example scene is not given as an argument and defaults to the scene object on the playground.

Setting beta to 0 or PI can, for technical reasons, cause problems.

Light

A hemispheric light is an easy way to simulate an ambient environment light. In our case, we are doing the bare minimum, just giving a name to the light and set it's location.

Setting y location to 1 while our main object is in the center (0,0,0) location will move the light above the object.

Box Mesh

We are creating a Box Mesh by calling BABYLON.MeshBuilder.CreateBox method with the minimum requirements, a name and an options empty object.

Exercise

Navigate to the code sample playground: https://playground.babylonjs.com/#KBS9I5#158
Move your mouse over the box and click & drag.
Uncomment line 5 and save or play the playground example.
Again, move mouse over the box and click & drag.
On the BABYLON.MeshBuilder.CreateBox method replace the empty object with this object: {width: 4, height: 2}.

Next Steps

Continue exploring how to create a 3D scene with other libraries

Keep working with BabylonJS and dive deeper into WebXR on the Babylon.js chapter:

ThreeJS Scene

ThreeJS basic scene

Although Three.js creates scene, camera and light as well as the object, the code syntax is little different.

Exercise

Navigate to the code sample by clicking Edit in JSFiddle.
Uncomment the lines 18 and 19 by deleting '/*' and '*/'
Press run to see the animation.
Change the values added to x and y rotation to see the result.
Change the cube's position instead of the rotation value.

AFrame Scene

AFrame declarative way to create a 3D scene

AFrame, simplifies creating a 3D scene by giving us a way to define our scene as html elements. Under the hood AFrame uses Three.js to do the same thing but allows you to change elements through attributes.

  <body>
    <a-scene background="color: #FAFAFA">
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
    </a-scene>
  </body>

With a frame you can create a scene using <a-scene> html tag and nest the objects tags inside the scene. As a person who is used to working with Canvas and JavaScript, this is confusing to me but I can see why it is easier for some.

Good news is, you can use Three.js to further create interactions for your AFrame scenes.

How to create a globe visualization with ThreeJS

Checkout the github repo: https://github.com/Yonet/WebXRWorkshop
npm install dependencies
Add a sphere geometry
Add light

    //light
    const light = new HemisphereLight(0xffffff, 0xbbbbff, 1);
    light.position.set(0.5, 1, 0.25);
    scene.add(light);

Texture and Bump map

Checkout the example below to see how bump map creates more realistic results.

Add Texture Loader and bump and texture maps

// Material
const texture = new TextureLoader().load("assets/images/globe/earthmap4k.jpg");
const bumpMap = new TextureLoader().load("assets/images/globe/earthbump4k.jpg");
const material = new MeshPhongMaterial({
    // color: 0xffff00 * Math.random(),
    specular: 0x222222,
    shininess: 25,
    bumpMap: bumpMap,
    bumpScale: 10,
    map: texture,
});

Exercise:

Create another sphere slightly bigger than the earth mesh and call it clouds.
Assign MeshPhongMaterial and add the properties: {opacity:0.8, transparent: true}
Load and assign earhclouds4k.png from the assets folder. Assign the texture as map of clouds material.
Set the position of the clouds same as the earth mesh.
Add animation slightly faster than earth.

To see how to map real time tweet location data to your globe using web sockets, check out Tweet Migration project.

Lighting your scene

Lights can change our scenes drastically. Understanding lighting can help you create the effect you intend.

ThreeJS Scene

ThreeJS basic scene

Although Three.js creates scene, camera and light as well as the object, the code syntax is little different.

Exercise

Navigate to the code sample by clicking Edit in JSFiddle.
Uncomment the lines 18 and 19 by deleting '/*' and '*/'
Press run to see the animation.
Change the values added to x and y rotation to see the result.
Change the cube's position instead of the rotation value.

AFrame Scene

AFrame declarative way to create a 3D scene

  <body>
    <a-scene background="color: #FAFAFA">
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
    </a-scene>
  </body>

Good news is, you can use Three.js to further create interactions for your AFrame scenes.

BabylonJS Scene

Basic Scene with a cube

Overview

We will create our BabylonJS scene on Babylon Playground. Find out more about the editor on What is playground? chapter.

We will implement the 3D concepts we discussed in How to create a basic 3D scene? chapter.

BabylonJS Code

To create a basic BabylonJS scene, we initialize a scene, create camera, light and a mesh and return the scene object.

const createScene =  () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));

    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    return scene;
}

Camera

Setting beta to 0 or PI can, for technical reasons, cause problems.

Light

A hemispheric light is an easy way to simulate an ambient environment light. In our case, we are doing the bare minimum, just giving a name to the light and set it's location.

Setting y location to 1 while our main object is in the center (0,0,0) location will move the light above the object.

Box Mesh

We are creating a Box Mesh by calling BABYLON.MeshBuilder.CreateBox method with the minimum requirements, a name and an options empty object.

Exercise

Navigate to the code sample playground: https://playground.babylonjs.com/#KBS9I5#158
Move your mouse over the box and click & drag.
Uncomment line 5 and save or play the playground example.
Again, move mouse over the box and click & drag.
On the BABYLON.MeshBuilder.CreateBox method replace the empty object with this object: {width: 4, height: 2}.

Next Steps

Continue exploring how to create a 3D scene with other libraries

ThreeJS Scene

Keep working with BabylonJS and dive deeper into WebXR on the Babylon.js chapter:

Babylon.js

How to create a globe visualization with ThreeJS

Checkout the github repo: https://github.com/Yonet/WebXRWorkshop
npm install dependencies
Add a sphere geometry
Add light

    //light
    const light = new HemisphereLight(0xffffff, 0xbbbbff, 1);
    light.position.set(0.5, 1, 0.25);
    scene.add(light);

Texture and Bump map

Checkout the example below to see how bump map creates more realistic results.

three.js examples

Add Texture Loader and bump and texture maps

// Material
const texture = new TextureLoader().load("assets/images/globe/earthmap4k.jpg");
const bumpMap = new TextureLoader().load("assets/images/globe/earthbump4k.jpg");
const material = new MeshPhongMaterial({
    // color: 0xffff00 * Math.random(),
    specular: 0x222222,
    shininess: 25,
    bumpMap: bumpMap,
    bumpScale: 10,
    map: texture,
});

Exercise:

Create another sphere slightly bigger than the earth mesh and call it clouds.
Assign MeshPhongMaterial and add the properties: {opacity:0.8, transparent: true}
Load and assign earhclouds4k.png from the assets folder. Assign the texture as map of clouds material.
Set the position of the clouds same as the earth mesh.
Add animation slightly faster than earth.

To see how to map real time tweet location data to your globe using web sockets, check out Tweet Migration project.

Lighting your scene

Lights can change our scenes drastically. Understanding lighting can help you create the effect you intend.

How to create a basic 3D scene?

We need to add a camera object to the scene that will be our viewers perspective. Anything on the scene but not in the view of the camera won't be visible on your canvas.

We also need a light source for our objects to be visible.

Finally, we will create a basic shape(mesh), box.

Let's create the basic scene using different libraries.

Project

How to create a basic 3D scene?

BabylonJS Scene

Overview

BabylonJS Code

Camera

Light

Box Mesh

Exercise

Next Steps

ThreeJS Scene

Exercise

AFrame Scene

How to create a globe visualization with ThreeJS

Texture and Bump map

Exercise:

Lighting your scene

3D Performance

Project

ThreeJS Scene

Exercise

AFrame Scene

BabylonJS Scene

Overview

BabylonJS Code

Camera

Light

Box Mesh

Exercise

Next Steps

How to create a globe visualization with ThreeJS

Texture and Bump map

Exercise:

3D Performance

Lighting your scene

How to create a basic 3D scene?