Accessing top level ThreeJS variables

Seasoned ThreeJS users might be wondering how to access top level ThreeJS variables, like Scene, Camera and Renderer. These variables are all still in place, there’s just attached to the app variable. EG to change the Scene background color from the default black, to dodgerblue, and to move the Camera back and up, you can access from the app variable and use them as normal. Advanced users should console.log(app) and see what’s going on under the hood.

Accessing top level ThreeJS variables

import * as THREE from "three";
import Threeasy from "threeasy";

const app = new Threeasy(THREE);
app.scene.background = new THREE.Color("dodgerblue");
app.camera.position.set(0, 2, 2);
app.camera.lookAt(0, 0, 0);

const mat = new THREE.MeshBasicMaterial();
const geo = new THREE.BoxGeometry();

const mesh = new THREE.Mesh(geo, mat);
app.animate(() => {
  mesh.rotation.y += 0.01;
});

app.scene.add(mesh);