Vue 3/vite中使用babylon.js记录

Vue 3 中vite中使用babylon.js记录

1. 请确保您的 Vue 应用程序已正确安装，并且可以正常运行
   
2. 安装 BabylonJS
   npm install @babylonjs/core
   npm install @babylonjs/gui
   npm install @babylonjs/inspector
   npm install @babylonjs/loaders
3. 代码示例
   父组件

<template>
  <canvas ref="bjsCanvas" width="500" height="500" />
</template>

<script>
import { ref, onMounted } from "@vue/runtime-core";
import { createScene } from "../scenes/MyFirstScene";

export default {
  name: "BabylonScene",
  setup() {
    const bjsCanvas = ref(null);

   onMounted(async () => {
    if (bjsCanvas.value) {
      await createScene(bjsCanvas.value);
     }
   });

    return {
      bjsCanvas,
    };
  },
};
</script>

子组件

import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, StandardMaterial, Color3, HemisphericLight } from "@babylonjs/core";
import '@babylonjs/loaders';

const createScene = (canvas) => {
  const engine = new Engine(canvas);
  const scene = new Scene(engine);

  const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
  camera.setTarget(Vector3.Zero());
  camera.attachControl(canvas, true);

  new HemisphericLight("light", Vector3.Up(), scene);

  const box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
  const material = new StandardMaterial("box-material", scene);
  //Skybox
const skybox = MeshBuilder.CreateBox("skyBox", {size:150}, scene);
  const skyboxMaterial = new StandardMaterial("skyBox", scene);
  skyboxMaterial.backFaceCulling = false;
  skyboxMaterial.reflectionTexture = new CubeTexture("/src/scenes/textures/skybox", scene);
  skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
  skyboxMaterial.diffuseColor = new Color3(0, 0, 0);
  skyboxMaterial.specularColor = new Color3(0, 0, 0);
  skybox.material = skyboxMaterial;

  SceneLoader.ImportMeshAsync("", "http://localhost:8081/src/scenes/", "valleyvillage.glb", scene).then((result) => {
    // 加载成功后的处理逻辑
    scene.getMeshByName("ground").receiveShadows = true;
});
  material.diffuseColor = Color3.Blue();
  box.material = material;

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

export { createScene };

import ‘@babylonjs/loaders’ 比较重要 ，加载.glb的文件使用
~至此，便可以在vite vue3中引入babylonjs啦~