How can I attach a light (like the HemisphericLight) to the camera?

Questions
,
1

Hello, sorry, but I canot reproduce this on the BabylonJS Sandbox, but I use VS Code with the dependiencies of the folowing below. What I’m trying to do is have the HemisphericLight follow the camers so I can see what im developing and fix errors, like the light is on my head. Here is the code im working with:
C:/ $ npm i -g @vue/cli
C:/ $ vue create <Proj_Name>
C:/<Proj_Name>/ $ npm i @babylonjs/core
C:/<Proj_Name>/ $ npm i @babylonjs/materials
C:/<Proj_Name>/ $ npm i @babylonjs/loaders

import {
    Scene,
    Engine,
    FreeCamera,
    Vector3,
    HemisphericLight,
    MeshBuilder,
    CubeTexture,
    Texture,
    Color3,
    Tools,
    PlaneBuilder,
  } from "@babylonjs/core";
  import * as BABYLON from "@babylonjs/materials";
// import { useAttrs } from "vue";
// import { grass_floor } from "./PBR_Grass";
  
  export class test {
    scene: Scene;
    engine: Engine;
  
    constructor(private canvas: HTMLCanvasElement) {
      this.engine = new Engine(this.canvas, true);
      this.scene = this.CreateScene();
      this.scene = this.CreateFur();
  
      this.engine.runRenderLoop(() => {
        this.scene.render();
      });
    }
  
    CreateScene(): Scene {
      const scene = new Scene(this.engine);
      const camera = new FreeCamera("camera", new Vector3(25, 25, 25), this.scene);
      camera.attachControl();
      camera.speed = 0.25;
      camera.maxZ = 50;
  
      const hemiLight = new HemisphericLight(
        "hemiLight",
        new Vector3(0, 1, -5),
        this.scene
      );
  
      hemiLight.intensity = 5;


      const envTex = CubeTexture.CreateFromPrefilteredData("./environment/sky.env", scene);


      scene.environmentTexture = envTex;

      scene.environmentIntensity = 0.5;

      scene.createDefaultSkybox(envTex, true);


      return scene;
    }

    CreateFur(): any {

      const grass = MeshBuilder.CreatePlane ("grass", {size:100}, this.scene);
      grass.rotation = new Vector3(Math.PI/2, 0, 0);

      const FurMaterial = new BABYLON.FurMaterial("fur", this.scene);
      FurMaterial.highLevelFur = true;
      FurMaterial.furLength = 5;
      FurMaterial.furAngle = 0;
      FurMaterial.furColor = new Color3(0.99, 0.82, 0.82);
      FurMaterial.diffuseTexture = new Texture("./images/grass_diff_2.jpg", this.scene);
      FurMaterial.furTexture = BABYLON.FurMaterial.GenerateTexture("furTexture", this.scene);
      FurMaterial.furSpacing = 3;
      FurMaterial.furDensity = 10;
      FurMaterial.furSpeed = 1000;
      FurMaterial.furGravity = new Vector3(0, 0, 0);

      grass.material = FurMaterial;


      const quality = 100;
      const shells = BABYLON.FurMaterial.FurifyMesh(grass, quality);

      return this.scene;
    }
  }
2

Unfortunately HemisphericLights do not take hierarchy in account. I would encourage you to replace it by a pointLight to get the result you want:

    var light = new BABYLON.PointLight("light", new BABYLON.Vector3(0, 0, 0), scene);

    light.parent = camera;

Babylon.js Playground (babylonjs.com)

4 Likes
4

Thank you for your help, it worked. : )