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"import "../../assets/model/engine.glb"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 };

这篇好文章是转载于：学新通技术网