Vue3 +TypeScript 引入 BabylonJs（Vue3实现3D）【一篇文章精通系列】
本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果。结合实际案例，详细讲解了如何在Vue3项目中引入BabylonJs，并了解其相关知识。通过本文的学习，相信读者可以轻松掌握Vue3实现3D效果以及BabylonJs的相关知识。
Vue3 +TypeScript 引入 BabylonJs（Vue3实现3D）【一篇文章精通系列】
- 一、创建项目
- 1、创建Vue3 + TypeScript项目
- 2、用WebStorm打开项目
- （1）打开项目以后执行 `npm install`
- （2）运行项目`npm run dev`
- 二、引入 BabylonJs
- 三、创建 Babylon.vue
- 四、场景渲染
- 五、运行最终效果
一、创建项目
1、创建Vue3 + TypeScript项目
npm create vite@latest babylonjs-vue3-ts -- --template vue
将生成的js文件都修改为ts文件
2、用WebStorm打开项目
（1）打开项目以后执行 npm install
（2）运行项目npm run dev
访问：http://127.0.0.1:5173/
二、引入 BabylonJs
我们需要将Babylon包安装到项目中，并使用其中的几个包。我们从Babylon的核心包开始，使用以下命令在终端中进行安装：
npm install @babylonjs/core
三、创建 Babylon.vue
<template></template><script setup lang="ts">
import { onMounted } from 'vue';
onMounted(()=>{const canvas = document.querySelector("canvas")
})
</script><style scoped></style>
// @ts-ignore
import { Scene, Engine,FreeCamera,HemisphericLight,Vector3 ,MeshBuilder,MeshBuilder} from "@babylonjs/core"
export class BabylonScene {scene: Scene;engine: Engine;constructor(private canvas: HTMLCanvasElement) {this.engine = new Engine(this.canvas, true);this.scene = this.CreateScene();this.engine.runRenderLoop(() => {this.scene.render();});}CreateScene(): Scene {const scene = new Scene(this.engine);//创建和定位自由摄影机const camera = new FreeCamera("camera1",new Vector3(0, 5, -10), scene);// 将摄影机定位到场景原点camera.setTarget(Vector3.Zero());// 这会将相机连接到画布camera.attachControl(this.canvas, true);// 创建灯光，目标为0,1,0-指向天空const light = new HemisphericLight("light",new Vector3(0, 1, 0), scene);// 将灯光调暗一小部分-0到1light.intensity = 0.7;// 内置“球体”形状。const sphere = MeshBuilder.CreateSphere("sphere",{diameter: 2, segments: 32}, scene);// 将球体向上移动其高度的1/2sphere.position.y = 1;// 内置“地面”形状。const ground = MeshBuilder.CreateGround("ground",{width: 6, height: 6}, scene);return scene;}
}四、场景渲染
在Babylon.vue引入刚刚创建的BabylonScene
<template><div ><canvas style="height: 100%;width: 100%"></canvas></div>
</template><script setup lang="ts">
import { onMounted } from 'vue';
import { BabylonScene } from '../BabylonEngine/BabylonScene';
onMounted(()=>{const canvas = document.querySelector("canvas");var scene = new BabylonScene(canvas);
})
</script><style scoped></style>在App.vue 引入Babylon.vue组件
五、运行最终效果
Vue3 +TypeScript 引入 BabylonJs（Vue3实现3D）【一篇文章精通系列】相关推荐
- ElasticSearch8.x.x 【一篇文章精通系列】【ES的基本操作，ES安装，ES head + Kibana】
ElasticSearch8.x.x [一篇文章精通系列][ES的基本操作,ES安装,ES head + Kibana] 一.ElasticSearch的安装 1.解压安装ES 2.熟悉目录 3.启动 ...
- Java之SpringCloud Alibaba【一】【Nacos一篇文章精通系列】
Java之SpringCloud Alibaba[一][Nacos一篇文章精通系列] 一.微服务介绍 1.系统架构演变 1)单体应用架构 2)垂直应用架构 3)分布式 4)SOA架构 5)微服务框架 ...
- Git分布式版本控制工具【IDEA版】【安装和使用以及上传代码到Gitee】（一篇文章精通系列）
一.目标 了解Git基本概念 能够概述git工作流程 能够使用Git常用命令 熟悉Git代码托管服务 能够使用idea操作git 二.Git概述 1.开发中的实际场景 场景一:备份 小明负责的模块就要 ...
- 写给仿真软件研发的“一篇文章入门”系列（终）
"一篇文章入门"系列不再更新,点击绿色标题可打开链接. 一篇文章入门系列主要针对工业仿真软件研发测试人员,也可作为相关从业人员和学生,以及对仿真软件开发感兴趣的读者. 所有文章来自 ...
- vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...
- vue3+TypeScript 引入js文件
修改tsconfig.json中的compilerOptions,将"allowJs"设为true,没有则自行添加 将"include"字段中将js文件的路径添 ...
- 【系统架构理论】一篇文章精通：Spring Cloud Netflix Eureka
是官方文档的总结 http://spring.io/projects/spring-cloud-netflix#overview 讲解基于2.0.2版本官方文档 https://cloud.sprin ...
- SEO优化指南与c语言,SEO终极算法：一篇文章精通SEO优化
今天是2017年9月14日,我大概是2015年7月份开始接触的SEO,如今已经有整整两年多的时间了,怎么说我也算半个老司机了.之前我也写过关于SEO优化一整套的优化流程,比如SEO终极算法系列,这一次 ...
- uniapp vue3中引入外部3D模型(适配App)
uniapp vue3中引入外部3D模型(适配App) 主要方式是通过renderjs来实现的, 因为使用threejs的话需要获取页面上的dom节点, 然后需要把threejs创建出来的canvan ...
最新文章
- 关于DataGridViewComboBoxColumn的二三事
- Javascript在IE中的有趣错误
- 手把手 | 20行Python代码教你批量将PDF转为Word
- python自学时间-Python中基本的日期时间处理的学习教程
- MongoDB学习札记第六篇之主从复制
- 如何读懂并写出装逼的函数式代码 1
- 在Ubuntu上下载、编译和安装Android 4.2 最新内核源代码（Linux Kernel）
- 【剑指offer】面试题58 - II：左旋转字符串（Java）
- Java案例：清洗网址垃圾字符
- 3.8 Anchor Boxes
- 如何修改WSS站点的主菜单
- nyoj8-一种排序
- 搜索引擎：获取并处理mdx英汉词典文件为数据库
- 对知识推理的认识的相关论文
- ubuntu上传代码文件到github
- vue使用JSzip读取压缩包文件内容进行MD5加密
- 问题：阿里云RDS数据库Binlog日志一直增大，撑爆磁盘
- sql简介香气和sql简介_香气和SQL简介
- 前端数组如何传到后台
- 2022hit计算机系统大作业