vue3+vite+babylon创建项目

1、首先搭建vue3的环境，默认就是安装vite

npm init vue@latest

安装vue环境，具体可以看 juejin.cn/post/714735…

2、然后就要安装babylon了

npm install @babylonjs/core

如果要是想引入一些本地的glb文件等 ，需要安装loaders

npm install @babylonjs/loaders

官方文档是

doc.babylonjs.com/communityEx…

3、首先在views文件夹创建一个Babylon.vue的文件

<template>
  <canvas ref="bjsCanvas" />
</template>
<script setup lang="ts">
import { ref, onMounted } from "@vue/runtime-core";
import { createScene } from "./scenes/MyFirstScene";
const bjsCanvas = ref(null);
onMounted(() => {
  if (bjsCanvas.value) {
    console.log('bjsCanvas', bjsCanvas)
    createScene(bjsCanvas.value);
  }});
</script>
<style>
</style>

4、在views里文件夹再建一个scenes的文件夹，在scenes文件夹里建一个 MyFirstScene.ts文件，在这里面可以写一些3d特效了，然后在Babylon.vue引入就好了

glb文件需要放在 public文件夹下

import * as BABYLON from "@babylonjs/core";
import "@babylonjs/loaders"
const createScene = (canvas: any) => {
  const engine = new BABYLON.Engine(canvas, true);
  const scene = new BABYLON.Scene(engine);
  const camera = new BABYLON.ArcRotateCamera(
    "camera",
    0,
    0,
    10,
    BABYLON.Vector3.Zero(),
    scene
  );
  camera.setPosition(new BABYLON.Vector3(0, 5, -10))
  camera.attachControl(canvas, true);
  const light = new BABYLON.DirectionalLight(
    "light",
    new BABYLON.Vector3(0-1, -1, 0),
    scene
  )
  // 需要把glb文件放在public文件夹的model文件夹下
  BABYLON.SceneLoader.ImportMeshAsync(
    "",
    "./model/",
    "engine.glb",
    scene
  )
  // const ground = BABYLON.MeshBuilder.CreateGround(
  //   "ground",
  //   { width: 6, height: 6},
  //   scene
  // )
  // ground.position.y = -1
  // const sphere = BABYLON.MeshBuilder.CreateSphere(
  //   "sphere",
  //   { diameter: 2},
  //   scene
  // )
  // sphere.position.set(3, 0 ,0)
  // const box = BABYLON.MeshBuilder.CreateBox(
  //   "box",
  //   { size: 2},
  //   scene
  // )
  // const cylinder = BABYLON.MeshBuilder.CreateCylinder(
  //   "cylinder",
  //   {height: 2, diameter: 2},
  //   scene
  // )
  // const cone = BABYLON.MeshBuilder.CreateCylinder(
  //   "cone",
  //   {height: 2, diameterTop: 0, diameterBottom: 2, tessellation: 90},
  //   scene
  // )
  // cone.position.set(-2, 0 ,3)
  // const torus = BABYLON.MeshBuilder.CreateTorus(
  //   "torus",
  //   {diameter: 4, thickness: 1, tessellation: 40},
  //   scene
  // )
  // torus.position.set(-4, -0.5 ,0)
  // torus.scaling.set(0.5, 0.5, 0.5)
  engine.runRenderLoop(() => {
    scene.render();
  });
  window.addEventListener("resize", () => {
    engine.resize()
  })};
export { createScene };