BabylonScene.vue

<template>
  <canvas class="babylon-scene" ref="canvas"></canvas>
</template>

<script>
import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import {
  Color4,
  HemisphericLight,
  PointLight,
  SpotLight
} from "@babylonjs/core";

import "@babylonjs/core/Debug/debugLayer"; // Augments the scene with the debug methods
import "@babylonjs/inspector"; // Injects a local ES6 version of the inspector to prevent automatically relying on the none compatible version

// Required side effects to populate the Create methods on the mesh class. Without this, the bundle would be smaller but the createXXX methods from mesh would not be accessible.
import "@babylonjs/core/Meshes/meshBuilder";
import "@babylonjs/core/Materials/standardMaterial";
import "@babylonjs/loaders/glTF";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";

import anime from "animejs/lib/anime.es.js";
import { Color3 } from "@babylonjs/core/Maths/math.color";

export default {
  methods: {
    getScrollPercentage() {
      // Ensure the value is between 0 and 1
      return Math.max(
        0,
        Math.min(1, window.scrollY / (this.pageHeight - this.windowHeight))
      );
    }
  },
  mounted() {
    this.pageHeight = document.documentElement.scrollHeight;
    this.windowHeight = window.innerHeight;

    console.log("V2: camera control removed - issue still visible");

    const animationProperties = {
      alpha: Math.PI / 2,
      beta: 1.3,
      x: null,
      y: null,
      z: null,
      fov: null
    };
    const animationDuration = 10000;

    const canvas = this.$refs.canvas;
    const engine = new Engine(canvas);
    let scene = new Scene(engine);
    scene.clearColor = new Color4(0, 0, 0, 0);

    scene.debugLayer.show();

    // This creates and positions a free models (non-mesh)
    let camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

    let pointLight1 = new PointLight(
      "pointLight1",
      new Vector3(-4, 8, 3),
      scene
    );
    pointLight1.intensity = 6;
    pointLight1.diffuse = Color3.FromHexString("#FF2B7A");

    let pointLight2 = new PointLight(
      "pointLight2",
      new Vector3(2, 10, 4),
      scene
    );
    pointLight2.intensity = 6;
    pointLight2.diffuse = Color3.FromHexString("#FF00E7");

    let hemiLight = new HemisphericLight("hemiLight", Vector3.Down(), scene);
    hemiLight.intensity = 0.6;
    hemiLight.diffuse = Color3.FromHexString("#519FFF");

    SceneLoader.Append("models/camera/", "AntiqueCamera.gltf", scene, scene => {
      // Create a default arc rotate models and light.
      scene.createDefaultCamera(true, true, false);

      scene.meshes.map(mesh => {
        if (mesh.id === "__root__") {
          mesh.translate(Vector3.Right(), 2);
          mesh.rotate(Vector3.Up(), Math.PI / 8);
        }
      });

      animationProperties.x = scene.activeCamera.getTarget().x;
      animationProperties.y = scene.activeCamera.getTarget().y;
      animationProperties.z = scene.activeCamera.getTarget().z;
      animationProperties.fov = scene.activeCamera.fov;

      let animation = anime({
        targets: animationProperties,
        alpha: Math.PI / 6,
        beta: Math.PI / 2,
        x: -3,
        y: 6,
        z: 2,
        fov: 0.52,
        easing: "linear",
        autoplay: false,
        duration: animationDuration,
        round: 10000
      });

      let previousPercentage = this.getScrollPercentage();

      scene.registerBeforeRender(() => {
        let newPercentage = this.getScrollPercentage();
        if (previousPercentage !== newPercentage) {
          animation.seek(newPercentage * animation.duration);
          previousPercentage = newPercentage;
          console.log(`Current camera alpha: ${scene.activeCamera.alpha}`);
        }

        scene.activeCamera.alpha = animationProperties.alpha;
        scene.activeCamera.beta = animationProperties.beta;
        scene.activeCamera.setTarget(
          new Vector3(
            animationProperties.x,
            animationProperties.y,
            animationProperties.z
          )
        );

        scene.activeCamera.fov = animationProperties.fov;
      });

      engine.runRenderLoop(() => {
        scene.render();
      });
    });
  }
};
</script>

<style scoped lang="scss">
.babylon-scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background: #121b2f url("../assets/background.png");
  background-size: cover;
  pointer-events: none;
}
</style>