How to use babylonjs - 10 common examples

createScene(engine,canvas) {
      const camera = new BABYLON.ArcRotateCamera("camera1",0, 0, 200,new BABYLON.Vector3(0,0,0), debugger3d.scene);
      camera.radius = 200;
      camera.setTarget(new BABYLON.Vector3(0,0,0));
      camera.attachControl(canvas, false);
      debugger3d.camera= camera;

      var light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1,1,1), debugger3d.scene);
      var light2 = new BABYLON.HemisphericLight('light2', new BABYLON.Vector3(-1,-1,0), debugger3d.scene);

      light1.diffuse = new BABYLON.Color3(1, 1, 1);
      light1.specular = new BABYLON.Color3(1, 1, 1);

      light2.diffuse = new BABYLON.Color3(1, 1, 1);
      light2.specular = new BABYLON.Color3(1, 1, 1);

      debugger3d.scene.clearColor = new BABYLON.Color3(0.3,0.3,0.3);

      debugger3d.scene.onPointerDown = function (evt, pickResult) {
        // if the click hits the ground object, we change the impact position
        var textureCoordinates = pickResult.getTextureCoordinates();
        console.log("tex ", textureCoordinates, " point ", pickResult.pickedPoint);
    };

  },

private static _ConvertFactorToVector3OrQuaternion(factor: number, babylonTransformNode: TransformNode, animation: Animation, animationType: number, animationChannelTargetPath: AnimationChannelTargetPath, convertToRightHandedSystem: boolean, useQuaternion: boolean): Nullable {
        let property: string[];
        let componentName: string;
        let value: Nullable = null;
        const basePositionRotationOrScale = _GLTFAnimation._GetBasePositionRotationOrScale(babylonTransformNode, animationChannelTargetPath, convertToRightHandedSystem, useQuaternion);
        if (animationType === Animation.ANIMATIONTYPE_FLOAT) { // handles single component x, y, z or w component animation by using a base property and animating over a component.
            property = animation.targetProperty.split('.');
            componentName = property ? property[1] : ''; // x, y, or z component
            value = useQuaternion ? Quaternion.FromArray(basePositionRotationOrScale).normalize() : Vector3.FromArray(basePositionRotationOrScale);

            switch (componentName) {
                case 'x': {
                    value[componentName] = (convertToRightHandedSystem && useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'y': {
                    value[componentName] = (convertToRightHandedSystem && useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'z': {
                    value[componentName] = (convertToRightHandedSystem && !useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'w': {
                    (value as Quaternion).w = factor;

wedgeMeshVertData.applyToMesh(wedgeMesh);
	wedgeMesh.isVisible = false; // but newly created copies and instances will be visible by default
	wedgeMesh.doNotSyncBoundingInfo = true;

	meshTemplates.wedge = wedgeMesh;

	// empty mesh for making drawings invisible
	var emptyMesh = new BABYLON.Mesh('emptyMesh', scene);
	meshTemplates.empty = emptyMesh;

	// add transform node for playerPosNode that's going to copy avatar's position so that the
	// camera can follow them without crashing when the avatar is rendered as billboard
	playerPosNode = new BABYLON.TransformNode('playerPosNode');

	// material
	baseMat = new BABYLON.StandardMaterial('base material', scene);
	baseMat.ambientColor = new BABYLON.Color3(1, 1, 1);
	baseMat.maxSimultaneousLights = 0;
	baseMat.freeze();

	hackOptions.init(scene);

	textCanvas = document.createElement('canvas');
	textCanvas.id = 'textCanvas';
	textCanvas.width = bitsy.canvas.width;
	textCanvas.height = bitsy.canvas.height;
	gameContainer.appendChild(textCanvas);
	textContext = textCanvas.getContext('2d');
	bitsy.dialogRenderer.AttachContext(textContext);

	// Watch for browser/canvas resize events
	engine.setSize(hackOptions.size.width, hackOptions.size.height);

componentDidMount() {
    if (this.state.support) {
      this.engine = new BABYLON.Engine(this.canvas, true, {
        preserveDrawingBuffer: true,
        stencil: true
      });

      this.scene = new BABYLON.Scene(this.engine);

      if (typeof this.props.onSceneMount === "function") {
        this.props.onSceneMount({
          scene: this.scene,
          engine: this.engine,
          canvas: this.canvas
        });
      } else {
        console.error("onSceneMount function not available");
      }

      // Resize the babylon engine when the window is resized
      window.addEventListener("resize", this.onResizeWindow);
    } else {
      swal(
        'Browser not supported',

public init() {
        // Not sure why a camera is needed on the server side...
        var camera = new ArcRotateCamera("Camera", 0, 0.8, 100, Vector3.Zero(), this.scene);

        // Important to first enable physics before creating any mesh
        const OIMO = require("oimo");
        this.scene.enablePhysics(new Vector3(0, -20, 0), new OimoJSPlugin(undefined, OIMO));

        // Creat mesh objects
        this.area.init();

        this.scene.executeWhenReady(() => {
            this.engine.runRenderLoop(() => {
                this.scene.render();
            });

            // Update to clients in fixed interval
            setInterval(() => {
                Object.keys(this.playerObjs).forEach((key) => {

private static _ConvertFactorToVector3OrQuaternion(factor: number, babylonTransformNode: TransformNode, animation: Animation, animationType: number, animationChannelTargetPath: AnimationChannelTargetPath, convertToRightHandedSystem: boolean, useQuaternion: boolean): Nullable {
        let property: string[];
        let componentName: string;
        let value: Nullable = null;
        const basePositionRotationOrScale = _GLTFAnimation._GetBasePositionRotationOrScale(babylonTransformNode, animationChannelTargetPath, convertToRightHandedSystem, useQuaternion);
        if (animationType === Animation.ANIMATIONTYPE_FLOAT) { // handles single component x, y, z or w component animation by using a base property and animating over a component.
            property = animation.targetProperty.split('.');
            componentName = property ? property[1] : ''; // x, y, or z component
            value = useQuaternion ? Quaternion.FromArray(basePositionRotationOrScale).normalize() : Vector3.FromArray(basePositionRotationOrScale);

            switch (componentName) {
                case 'x': {
                    value[componentName] = (convertToRightHandedSystem && useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'y': {
                    value[componentName] = (convertToRightHandedSystem && useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'z': {
                    value[componentName] = (convertToRightHandedSystem && !useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'w': {
                    (value as Quaternion).w = factor;

ShadowGenerator,
	DirectionalLight,
	Color4,
	CSG,
	Animation,
	AnimationEvent,
	Sound,
} from 'babylonjs';

import CANNON from 'cannon';
window.CANNON = CANNON;

const canvas = document.getElementById("stage");
const engine = new Engine(canvas, true);
const scene = new Scene(engine);
const light = new HemisphericLight("light", new Vector3(0, 3, 0), scene);
let started = false;
let renderScene = true;
let shift = 0;
light.intensity = 2.5;
const camera = new FreeCamera("FreeCamera",new Vector3(0, 4, -22), scene);
camera.setTarget(new Vector3(0, 1, 0));
const sphere = MeshBuilder.CreateSphere("ball", {
	diameter: 0.6
}, scene);
sphere.position.z = -17;
sphere.position.y = 0.7;
const boxes=[];

let sceneAnimations = [];
let currentBox;
// droping animation

function createScene(): Scene {
    // Create scene
    var scene: Scene = new Scene(engine);
    var sphereLight = new DirectionalLight("dir02", new Vector3(0.2, -1, 0), scene);
    sphereLight.position = new Vector3(0, 80, 0);
    var gravityVector = new BABYLON.Vector3(0, -1, 0);
    scene.enablePhysics(gravityVector, new CannonJSPlugin);

    scene.clearColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Black());

    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
    //var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);
    camera.checkCollisions = true;
    camera.applyGravity = true;
    // Targets the camera to a particular position. In this case the scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // Attach the camera to the canvas
    camera.attachControl(canvas, true);

    var grassMaterial = new BABYLON.StandardMaterial("grass", scene);

// And give it an ambient color
  board.scene.ambientColor = new babylon.Color3(0.3, 0.3, 0.3);
  // This creates and positions a free camera
  //var camera = new babylon.FreeCamera("camera1", new babylon.Vector3(0, 0, 1000), scene);
  //  Create an ArcRotateCamera aimed at 0,0,0, with no alpha, beta or radius, so be careful.  It will look broken.
  board.camera = new babylon.ArcRotateCamera(
    "ArcRotateCamera",
    0,
    0,
    0,
    babylon.Vector3.Zero(),
    board.scene
  );
  //Set up anti-aliasing (required in babylon.js 3.0+)
  board.postProcess = new babylon.FxaaPostProcess("fxaa", 1.0, board.camera);
  board.camera.upVector = new babylon.Vector3(0, 0, 1);

  board.camera.upperBetaLimit = Math.PI;
  board.camera.allowUpsideDown = true;

  //Make an invisible plane to hit test for the scene's X, Y co-ordinates (not the screens X, Y co-ordinates)
  board.pickerPlane = new babylon.Plane.FromPositionAndNormal(
    babylon.Vector3.Zero(),
    new babylon.Vector3(0, 0, 1)
  );

  //Initialize variables
  board.cameraTargetX = 0; //The X point on the Z = 0 plane the camera is pointed
  board.cameraTargetY = 0; //The Y point on the Z = 0 plane the camera is pointed

  board.cameraAlpha = Math.PI/4; //The camera angle above the XY plane
  board.cameraBeta = 0; //The camera angle rotated around the Z axis

initScene() {
    this.scene.clearColor = new BABYLON.Color3(0.1, 0.1, 0.1);
    this.scene.ambientColor = new BABYLON.Color3(0.1, 0.1, 0.1);
    // This creates and positions a free camera (non-mesh)
    this.camera = new BABYLON.ArcRotateCamera(
      "camera",
      0,
      0,
      10,
      BABYLON.Vector3.Zero(),
      this.scene
    );

    // This targets the camera to scene origin
    this.camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    this.camera.attachControl(this.canvas, true);