Babylon Playground Torch

torch.ts

class Torch {
    private holderInstance: BABYLON.InstancedMesh; // Instance of the torch holder
    private flameSprite: BABYLON.Sprite; // Sprite for the flame
    private torchLight: BABYLON.PointLight; // Light for the torch flame
    private torchTransform: BABYLON.TransformNode; // Transform node for grouping
    private static torchHolderBaseMesh: BABYLON.Mesh;
    private static flameManager: BABYLON.SpriteManager;

    constructor(
        scene: BABYLON.Scene,
        position: BABYLON.Vector3,
        color: BABYLON.Color4 = new BABYLON.Color4(1, 0.4, 0, 1)
    ) {
        if (Torch.torchHolderBaseMesh == null) {
            Torch.torchHolderBaseMesh = BABYLON.MeshBuilder.CreateCylinder("torchHolderBase", { height: 0.2, diameter: 0.025, tessellation: 8 }, scene);
            Torch.torchHolderBaseMesh.isVisible = false; // Hide the base mesh, only use instances
            Torch.flameManager = new BABYLON.SpriteManager("flameManager", "textures/Fire_SpriteSheet3_8x8.png", 64, 128, scene);
        }
        // Create a transform node as a parent for the torch components
        this.torchTransform = new BABYLON.TransformNode("torchTransform", scene);
        this.torchTransform.position = position; // Position in global space

        // Create an instance of the torch holder as a child of the transform node
        this.holderInstance = Torch.torchHolderBaseMesh.createInstance("torchHolderInstance");
        this.holderInstance.parent = this.torchTransform; // Set parent to transform node
        this.holderInstance.position = new BABYLON.Vector3(0, 0, 0); // Position relative to the transform node
        this.holderInstance.rotation.x = Math.PI / 4; // Rotate to 45 degrees

        // Create a flame sprite at the tip of the torch holder
        this.flameSprite = new BABYLON.Sprite("flameSprite", Torch.flameManager);
        this.flameSprite.width = 0.5; // Scale up/down as needed
        this.flameSprite.height = 0.7; // Adjust height to match flame appearance
        this.flameSprite.position = position.add(new BABYLON.Vector3(0, 0.3, 0.05));
        this.flameSprite.playAnimation(0, 63, true, 16); // Play all frames in loop with an appropriate frame rate
        this.flameSprite.color = color; // Set the flame color

        // Create a point light to simulate the flame's illumination
        this.torchLight = new BABYLON.PointLight("torchLight", new BABYLON.Vector3(0, 0.1, 0), scene);
        this.torchLight.parent = this.torchTransform; // Parent the light to the transform node
        this.torchLight.intensity = 5; // Increased intensity for stronger light effect
        this.torchLight.range = 1; // Larger light radius
        this.torchLight.specular = this.torchLight.diffuse = new BABYLON.Color3(color.r, color.g, color.b);

        // Animate torch flame flicker using registerBeforeRender
        /*scene.registerBeforeRender(() => {
            this.torchLight.intensity = 2.5 + Math.random() * 0.5; // Stronger flickering
            const flickerOffset = 0.03;
            this.torchLight.position.x = Math.random() * flickerOffset - flickerOffset / 2;
            this.torchLight.position.y = 0.75 + Math.random() * flickerOffset - flickerOffset / 2;
        });*/

        const dragBehavior = new BABYLON.PointerDragBehavior();
        this.torchTransform.addBehavior(dragBehavior);
        dragBehavior.onDragObservable.add((event) => {
            console.log("drag");
            console.log(event);
            this.flameSprite.position.addInPlace(event.delta);
        });
    }

    public moveTo(pos: BABYLON.Vector3) {
        this.torchTransform.position.copyFrom(pos);
        this.flameSprite.position = pos.add(new BABYLON.Vector3(0, 0.3, 0.05));
    }
}

class Playground {
    public static CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): BABYLON.Scene {
        // Create a basic Babylon Scene object
        const scene = new BABYLON.Scene(engine);

        // Add a camera to the scene and attach it to the canvas
        const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 4, 5, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        // Add a light to the scene (ambient light for overall illumination)
        const ambientLight = new BABYLON.HemisphericLight("ambientLight", new BABYLON.Vector3(0, 1, 0), scene);
        ambientLight.intensity = 0.3; // Dim ambient light

        // Create a wall using a box
        const wall = BABYLON.MeshBuilder.CreateBox("wall", { width: 2, height: 1, depth: 0.1 }, scene);
        wall.position.z = 1; // Position it in front of the origin
        wall.position.y = 0.5;

        // Add rock texture with normal map to the wall
        const wallMaterial = new BABYLON.StandardMaterial("wallMaterial", scene);
        wallMaterial.diffuseTexture = new BABYLON.Texture("textures/rock.png", scene);
        wallMaterial.bumpTexture = new BABYLON.Texture("textures/rockn.png", scene); // Normal map
        wall.material = wallMaterial;

        new Torch(scene, new BABYLON.Vector3(0, 0.5, 1.1));
      
        return scene;
    }
}