Babylon JS Day 8

Today I broke away from structured reading and gave myself some time to play and create. I already have an idea of what I want to do for the project this Friday, so I spent my time today creating a scene and some basic features that I’ll need later. I’ll go into more detail regarding the project on Friday.

For now, I focused on a few things: camera, lighting, background color, and a basic pedestal to build on.

Camera

I referred to my notes last week to help construct an Arc Rotate camera. This camera will allow a visitor to rotate around a fixed point. Notice the call to upperBetaLimit. I remembered seeing this in the Getting Started guide last week. This will let me stop the camera from moving below a certain point. The scene I’m making is basically on top of a table, so I don’t want the camera to go below the table. The calls to lowerRadiusLimit and upperRadiusLimit allow me to constrain the zoom level of the camera.

  const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
  camera.upperBetaLimit = Math.PI / 2.2;
  camera.lowerRadiusLimit = 10;
  camera.upperRadiusLimit = 50;
  camera.setPosition(new BABYLON.Vector3(0, 15, -28));
  camera.attachControl(canvas, true);

Lighting and Background

This is simple for now. I changed the background color of the scene and positioned some lights. I included both a directional light and a hemispheric light.

  scene.clearColor = BABYLON.Color3.FromHexString("#b1d5fa");

  const ambientLight = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 10, 0));
  const directionalLight = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, -3), scene);

Pedestal

I throught of several ideas for creating the mesh for the table/pedestal before I settled on the Lathe. I referred to the example from the Getting Started guide where we created a fountain. I did something similar for my pedestal.

  const baseMat = new BABYLON.StandardMaterial("baseMat", scene);
  baseMat.diffuseColor = new BABYLON.Color3.FromHexString("#6e6d7c");
  baseMat.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2);

  const standProfile = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(8, 0, 0),
    new BABYLON.Vector3(8, 1, 0),
    new BABYLON.Vector3(7, 1, 0),
    new BABYLON.Vector3(7, 0.5, 0),
    new BABYLON.Vector3(1, 0.5, 0),
    new BABYLON.Vector3(1, 15, 0),
    new BABYLON.Vector3(3, 17, 0),
    new BABYLON.Vector3(10, 18, 0),
    new BABYLON.Vector3(10, 19, 0),
    new BABYLON.Vector3(0, 19, 0)
  ];

  const stand = BABYLON.MeshBuilder.CreateLathe(
    "stand",
    { tessellation: 24, shape: standProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE },
    scene
  );
  stand.material = baseMat;
  stand.convertToFlatShadedMesh();
  stand.position = new BABYLON.Vector3(0, -17, 0);

At the end of my time today I was left with the building blocks that I’ll use on Friday.