基于Typescript,使用Vite构建融合Vue.js的Babylon.js开发环境
一、创建Vite项目
使用Vite初始化一个Vue+TypeScript项目:
npm create vite@latest my-babylon-app -- --template vue-ts
cd my-babylon-app
npm create vite@latest my-babylon-app -- --template vue-ts 命令用于快速创建一个基于 Vite 的 Vue + TypeScript 项目。以下分三个部分解释以下这行命令的含义:
1.npm create vite@latest
- npm 是 Node.js 的包管理工具,用于安装和管理项目依赖。
- create 是 npm 提供的一个命令,用于运行一个初始化脚本,通常是某个包提供的脚本。
- vite@latest 指定要运行的初始化脚本来自 vite 包的最新版本( latest )。 vite 是一个现代化的前端构建工具,支持快速开发和构建。
2、my-babylon-app
my-babylon-app是新项目的名称,也是项目目录的名称。运行命令后, npm 会创建一个名为 my-babylon-app 的文件夹,并在其中初始化项目。
3、-- --template vue-ts
- -- 是一个分隔符,用于将参数传递给 vite 的初始化脚本,而不是传递给 npm 。
- --template vue-ts 是传递给 vite 的参数,指定项目模板。 vue-ts 表示使用 Vue 和 TypeScript 的模板。
cd my-babylon-app命令是进入my-babylon-app目录,这样后面的安装的@babylonjs/core和@babylonjs/loaders都是在这个目录下安装。
二、 安装依赖
安装Babylon.js核心库和可选的加载器:
npm install @babylonjs/core @babylonjs/loaders --save
npm install @babylonjs/core @babylonjs/loaders --save 是一个用于安装 Babylon.js 核心库和加载器库的命令,并将它们添加到项目的依赖中。通过这种方式,你可以快速引入 Babylon.js 的功能,开始构建 3D 场景。
1. npm install
这是 npm 的一个基本命令,用于安装包(即模块或库)到当前项目中。它会根据指定的包名从 npm 仓库下载并安装包,并将其放在项目的 node_modules 文件夹中。
2. @babylonjs/core
这是 Babylon.js 的核心库,包含了 Babylon.js 的所有基础功能,例如场景管理、渲染引擎、3D 对象(如网格、材质、相机等)的创建和操作。它是使用 Babylon.js 进行 3D 开发的基础。
3. @babylonjs/loaders
这是 Babylon.js 的加载器库,提供了用于加载外部资源(如 3D 模型、纹理等)的功能。例如,你可以使用它来加载 .glb 、 .gltf 等格式的 3D 模型文件。
4. --save
这个选项告诉 npm 将安装的包添加到项目的 package.json 文件的 dependencies 部分。这样,当你运行 npm install 时,npm 会自动安装这些依赖项,确保项目在其他环境中也能正常运行。 参考下面package.json 文件内容,注意dependencies的值包含了"@babylonjs/core": "^7.47.3"和"@babylonjs/loaders": "^7.47.3"这两行内容。
{"name": "my-babylon-app","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"@babylonjs/core": "^7.47.3","@babylonjs/loaders": "^7.47.3","vue": "^3.5.13"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","@vue/tsconfig": "^0.7.0","typescript": "~5.7.2","vite": "^6.1.0","vue-tsc": "^2.2.0"}
}
不过实际上从 npm 5.0.0 开始, --save 已经成为默认行为,因此在安装依赖时是否显式添加 --save 并不会产生实际的区别。
三、 创建Babylon场景组件
在 src/components
下新建 BabylonScene.vue
:
<template><canvas ref="canvas"></canvas>
</template><script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, MeshBuilder } from '@babylonjs/core';export default defineComponent({name: 'BabylonCanvas',setup() {const canvas = ref<HTMLCanvasElement | null>(null);onMounted(() => {if (!canvas.value) return;// 初始化引擎和场景const hardwareScalingLevel = 0.5;const engine = new Engine(canvas.value);engine.setHardwareScalingLevel(hardwareScalingLevel);const scene = new Scene(engine);// 创建相机const camera = new ArcRotateCamera("camera",Math.PI / 2,Math.PI / 3,10,Vector3.Zero(),scene);camera.attachControl(canvas.value, true);// 添加灯光new HemisphericLight("light", new Vector3(0.5, 1, 0), scene);// 创建立方体MeshBuilder.CreateBox("box", {}, scene);// 渲染循环engine.runRenderLoop(() => {scene.render();});// 窗口调整时重置引擎window.addEventListener('resize', () => engine.resize());// 组件卸载时清理资源onUnmounted(() => {scene.dispose();engine.dispose();});});return {canvas,};},
});
</script>
上面代码中创建engine的部分一般会写成:
const engine = new Engine(canvas.value, true);
其中的Engine的第二个参数true是表示应用反锯齿,但是个人感觉并不好用,所以写成了:
const hardwareScalingLevel = 0.5;
const engine = new Engine(canvas.value);
engine.setHardwareScalingLevel(hardwareScalingLevel);
就是让渲染画面是canvas尺寸的2倍(长宽都是2倍,渲染像素就是4倍),这样得到的结果非常细腻,理论上来讲会导致Babylonjs在shader的片元着色器阶段和后期处理阶段增加负担,但暂时先以效果好优先吧。
四、在App组件中使用
修改 src/App.vue
:
<template><BabylonScene />
</template><script setup lang="ts">
import BabylonScene from './components/BabylonScene.vue'
</script>
五、配置TypeScript(可选)
如果遇到类型错误,检查 tsconfig.json
确保包含:
{"compilerOptions": {"types": ["@babylonjs/core"]}
}
六、运行项目
npm run dev
访问 http://localhost:5173
查看渲染的立方体。
七、构建项目
npm run build
这里需要注意一下,默认情况下构建完整之后,构建的内容会保存到dist文件夹内, 其中的index.html文件中使用的目录是绝对路径,参考如下:
<script type="module" crossorigin src="/assets/index-1vlhUxn0.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DexAqUpL.css">
但是这里最好使用相对路径,参考如下:
<script type="module" crossorigin src="./assets/index-1vlhUxn0.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DexAqUpL.css">
注意路径前面多了一个 “.” 。
为了使用相对路径,你可以在vite.config.ts中添加如下内容:
base: './', // 设置 base 为 './',确保生成的路径是相对路径
完整的vite.config.ts参考如下:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],base: './', // 设置 base 为 './',确保生成的路径是相对路径
});
先写这么多吧,大家春节愉快!!
相关文章:
基于Typescript,使用Vite构建融合Vue.js的Babylon.js开发环境
一、创建Vite项目 使用Vite初始化一个VueTypeScript项目: npm create vitelatest my-babylon-app -- --template vue-ts cd my-babylon-app npm create vitelatest my-babylon-app -- --template vue-ts 命令用于快速创建一个基于 Vite 的 Vue TypeScript 项目。…...
DockerFile详细学习
目录 1.DockerFile介绍 2.DockerFile常用指令 3.指令详细讲解 4.实例 构建Node-Exporter 构建Alertmanager 构建Mariadb 1.DockerFile介绍 什么是 Dockerfile? Dockerfile 是一个文本文件,包含了构建 Docker 镜像的所有指令。 Dockerfile 是一…...
C++11详解(三) -- 可变参数模版和lambda
文章目录 1.可变模版参数1.1 基本语法及其原理1.2 包扩展1.3 empalce系列接口1.3.1 push_back和emplace_back1.3.2 emplace_back在list中的使用(模拟实现) 2. lambda2.1 lambda表达式语法2.2 lambda的捕捉列表2.3 lambda的原理 1.可变模版参数 1.1 基本…...
IDEA 中集成 Maven,配置环境、创建以及导入项目
目录 在 IntelliJ IDEA 中集成 Maven 并配置环境 1. 打开 IDEA 设置 2. 定位 Maven 配置选项 3. 配置 Maven 路径 4. 应用配置 创建 Maven 项目 1. 新建项目 2. 选择项目类型 3. 配置项目信息 4. 确认 Maven 设置 5. 完成项目创建 导入 Maven 项目 1. 打开导入窗口…...
讯飞智作 AI 配音技术浅析(三):自然语言处理
自然语言处理(NLP)是讯飞智作 AI 配音技术的重要组成部分,负责将输入的文本转换为机器可理解的格式,并提取出文本的语义和情感信息,以便生成自然、富有表现力的语音。 一、基本原理 讯飞智作 AI 配音的 NLP 技术主要包…...
html转PDF文件最完美的方案(wkhtmltopdf)
目录 需求 一、方案调研 二、wkhtmltopdf使用 如何使用 文档简要说明 三、后端服务 四、前端服务 往期回顾 需求 最近在做报表类的统计项目,其中有很多指标需要汇总,网页内容有大量的echart图表,做成一个网页去浏览,同时…...
漏洞挖掘 | 基于mssql数据库的sql注入
视频教程在我主页简介或专栏里 目录: 前记 0x1 判断网站数据库类型 0x2 了解mssql数据库的主要三大系统表 0x3 了解mssql的主要函数 0x4 判断注入点及其注入类型 0x5 联合查询之判断列数 0x6 联合查询之获取数据库相关信息 0x7 mssql之时间盲注 0x8 mssql之报错注…...
.Net Core笔记知识点(跨域、缓存)
设置前端跨域配置示例: builder.Services.AddCors(option > {option.AddDefaultPolicy(policy > {policy.WithOrigins(originUrls).AllowAnyMethod().AllowAnyHeader().AllowCredentials();});});var app builder.Build();app.UseCors(); 【客户端缓存】接…...
JS实现一个通用的循环填充数组的方法
function createFilledArray(length, pattern) {return Array.from({ length }, (_, i) > pattern[i % pattern.length]); }// 示例 const result createFilledArray(8, [1, 2, 3]);console.log(result); // [1, 2, 3, 1, 2, 3, 1, 2]解析: createFilledArray(…...
Java项目: 基于SpringBoot+mybatis+maven+mysql实现的智能学习平台管理系(含源码+数据库+毕业论文)
一、项目简介 本项目是一套基于SpringBootmybatismavenmysql实现的智能学习平台管理系统 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、…...
Rust HashMap :当储物袋遇上物品清单
开场白:哈希映射的魔法本质 在Rust的奇幻世界里,HashMap就像魔法师的储物袋: 键值对存储 → 每个物品都有专属咒语(键)和实体(值)快速查找 → 念咒瞬间召唤物品动态扩容 → 自动伸展的魔法空间…...
力扣-哈希表-18 四数之和
思路 和《三数之和》类似,也使用类似双指针的操作,重点在去重,细节是多个数目相加需要小心超出范围,强转一下。 代码 class Solution { public:vector<vector<int>> fourSum(vector<int>& nums, int tar…...
DeepSeek-VL2论文解读:用于高级多模态理解的专家混合视觉语言模型
github:https://github.com/deepseek-ai/DeepSeek-VL2 paper: https://github.com/deepseek-ai/DeepSeek-VL2/blob/main/DeepSeek_VL2_paper.pdf 大型视觉语言模型(VLMs)已经成为人工智能领域的变革性力量,将大型语言模型(LLMs&…...
PHP JSON操作指南
PHP JSON操作指南 概述 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。PHP作为一门流行的服务器端脚本语言,支持对JSON数据进行读取、编写和解析。本文将…...
使用ES5和ES6求函数参数的和、解析URL Params为对象
文章目录 1 使用ES5和ES6求函数参数的和1.1 ES51.2 ES6 2 解析URL Params为对象 1 使用ES5和ES6求函数参数的和 1.1 ES5 function sum() {let sum 0;Array.prototype.forEach.call(arguments, function(item) {sum item * 1;})return sum; }1.2 ES6 function sum(...nums)…...
Python 数据挖掘与机器学习
模块一:Python编程 Python编程入门 1、Python环境搭建 2、如何选择Python编辑器? 3、Python基础 4、常见的错误与程序调试 5、第三方模块的安装与使用 6、文件读写(I/O) Python进阶与提高 1、Numpy模块库 2、Pandas模块…...
【华为OD-E卷 - 108 最大矩阵和 100分(python、java、c++、js、c)】
【华为OD-E卷 - 最大矩阵和 100分(python、java、c、js、c)】 题目 给定一个二维整数矩阵,要在这个矩阵中选出一个子矩阵,使得这个子矩阵内所有的数字和尽量大,我们把这个子矩阵称为和最大子矩阵,子矩阵的…...
Mysql系列之--重新认识Mysql
1、Mysql是什么 Mysql是一个被广泛使用的开源的关系型数据库管理系统(RDBMS),使用结构化查询语句SQL进行管理和操作数据。Mysql有客户端和服务端,客户端通过ip地址、端口、用户名、密码连接到服务端,然后使用SQL语句进…...
利用UNIAPP实现短视频上下滑动播放功能
在 UniApp 中实现一个短视频上下滑动播放的功能,可以使用 swiper 组件来实现滑动效果,并结合 video 组件来播放短视频。以下是一个完整的示例,展示如何在 UniApp 中实现这一功能。 1. 创建 UniApp 项目 如果你还没有创建 UniApp 项目,可以使用 HBuilderX 创建一个新的项目…...
计算机毕业设计hadoop+spark+hive民宿推荐系统 酒店推荐系统 民宿价格预测 酒店价预测 机器学习 深度学习 Python爬虫 HDFS集群
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
Shell 中的 Globbing:原理、使用方法与实现解析(中英双语)
Shell 中的 Globbing:原理、使用方法与实现解析 在 Unix Shell(如 Bash、Zsh)中,globbing 是指 文件名模式匹配(filename pattern matching),它允许用户使用特殊的通配符(wildcards…...
解决 ssh connect to host github.com port 22 Connection timed out
一、问题描述 本地 pull/push 推送代码到 github 项目报 22 端口连接超时,测试连接也是 22 端口连接超时 ssh 密钥没问题、也开了 Watt Toolkit 网络是通的,因此可以强制将端口切换为 443 二、解决方案 1、测试连接 ssh -T gitgithub.com意味着无法通…...
CSS的媒体查询语法
CSS的媒体查询语法 常见的媒体类型常见的特性示例 CSS的媒体查询语法可以根据不同的设备特性(如屏幕尺寸、分辨率等)应用不同的样式。基本语法如下: media 媒体类型 and (特性: 值) {/* 样式规则 */ }常见的媒体类型 screen:用于…...
生产环境超实用shell脚本一
生产环境超实用shell脚本一 Shell脚本作为一种强大的自动化工具,能够帮助运维人员轻松应对各种复杂的任务。 本文将为您介绍服务器健康检查、日志清理、备份以及监控等多个方面,并详细阐述每个脚本的功能和应用场景,助力您提升运维效率&…...
【1】高并发导出场景下,服务器性能瓶颈优化
高并发导出场景下,服务器性能瓶颈通常出现在 CPU、内存、磁盘 I/O 或网络带宽等方面。为了解决这些问题,可以从以下几个方面进行优化: 1. 优化导出逻辑 减少计算复杂度:检查导出逻辑中是否存在不必要的计算或重复操作,…...
go的sync包学习
包含了sync.Mutex,sync.RWMutex,sync.Cond,sync.Map,sync.Once等demo sync.Mutex //讲解mutex import ("fmt""math/rand""sync""time" )type Toilet struct {m sync.Mutex } type Person struct {Name string }var DateTime "2…...
一文读懂:TCP网络拥塞的应对策略与方案
TCP(传输控制协议)是互联网中广泛使用的可靠传输协议,它通过序列号、确认应答、重发控制、连接管理以及窗口控制等机制确保数据的可靠传输。然而,在网络环境中,由于多个主机共享网络资源,网络拥塞成为了一个…...
用DeepSeek分析总结一下DeepSeek发表过的8篇论文
1. 《深度求索大语言模型:以长期主义拓展开源语言模型》(2024年1月5日) 2. 《深度求索代码模型:当大语言模型遇上编程——代码智能的崛起》(2024年1月26日) 3. 《深度求索视觉语言模型:迈向真…...
node.js使用mysql2对接数据库
一、引言 在现代Web开发中,Node.js作为一种高效、轻量级的JavaScript运行时环境,已经广泛应用于后端服务的开发中。而MySQL,作为一个广泛使用的关系型数据库管理系统(RDBMS),提供了强大的数据存储和查询功能…...
华为支付-免密支付接入免密代扣说明
免密代扣包括支付并签约以及签约代扣场景。 开发者接入免密支付前需先申请开通签约代扣产品(即申请配置免密代扣模板及协议模板ID)。 华为支付以模板维度管理每一个代扣扣费服务,主要组成要素如下: 接入免密支付需注意&#x…...
Java 面试真题解析与技巧分享
Java 面试对于每一位 Java 开发者来说都是至关重要的,它不仅是对我们技术能力的检验,更是我们迈向理想工作岗位的关键一步。在面试中,掌握常见真题的解题思路和回答技巧,能够让我们更加自信地展示自己的实力。本文将结合具体的面试…...
使用 Python 编程语言来实现机器学习小项目教程案例
以下是一个简单的机器学习小项目教程案例,使用 Python 编程语言和 Scikit-learn 库来实现一个分类任务。我们将使用经典的鸢尾花(Iris)数据集来训练一个分类器,预测鸢尾花的种类。 项目目标 使用机器学习算法对鸢尾花数据集进行分类,预测鸢尾花的类别(Setosa、Versicolor…...
网络安全 | 零信任架构:重构安全防线的未来趋势
网络安全 | 零信任架构:重构安全防线的未来趋势 一、前言二、零信任架构的核心概念与原理2.1 核心概念2.2 原理 三、零信任架构的关键技术组件3.1 身份管理与认证系统3.2 授权与访问控制系统3.3 网络与安全监测系统3.4 加密与数据保护技术 四、零信任架构与传统安全…...
react关于手搓antd pro面包屑的经验(写的不好请见谅)
我们先上代码,代码里面都有注释,我是单独写了一个组件,方便使用,在其他页面引入就行了 还使用了官方的Breadcrumb组件 import React, { useEffect, useState } from react; import { Breadcrumb, Button } from antd; import { …...
PHP-运算符
[题目信息]: 题目名称题目难度PHP-运算符2 [题目考点]: PHP运算符优先级[Flag格式]: SangFor{zEk4r_djfgy0CibPz6LdXpwBrXRckhIT}[环境部署]: docker-compose.yml文件或者docker tar原始文件。 http://分配ip:2067[题目writeup]&#x…...
chrome浏览器chromedriver下载
chromedriver 下载地址 https://googlechromelabs.github.io/chrome-for-testing/ 上面的链接有和当前发布的chrome浏览器版本相近的chromedriver 实际使用感受 chrome浏览器会自动更新,可以去下载最新的chromedriver使用,自动化中使用新的chromedr…...
BurpSuite抓包与HTTP基础
文章目录 前言一、BurpSuite1.BurpSuite简介2.BurpSuite安装教程(1)BurpSuite安装与激活(2)安装 https 证书 3.BurpSuite使用4.BurpSuite资料 二、图解HTTP1.HTTP基础知识2.HTTP客户端请求消息3.HTTP服务端响应消息4.HTTP部分请求方法理解5.HTTPS与HTTP 总结 前言 在网络安全和…...
SQLAlchemy 2.0的简单使用教程
SQLAlchemy 2.0相比1.x进行了很大的更新,目前网上的教程不多,以下以链接mysql为例介绍一下基本的使用方法 环境及依赖 Python:3.8 mysql:8.3 Flask:3.0.3 SQLAlchemy:2.0.37 PyMySQL:1.1.1使用步骤 1、创建引擎,链接到mysql engine crea…...
Android原生开发问题汇总
Fragment顶部出现一个白条怎么办?父类布局搞事情。 layer-list被拉伸问题 Android之 ImageView android:src和tools:src的区别是什么? Android运行时权限的总结,以及EasyPermissions框架的使用 Android Studio添加EasyPemissions Android中module怎…...
springboot中使用注解实现分布式锁
下面将详细介绍如何在 Spring Boot 里借助注解实现分布式锁,以login_lock:作为锁的 key 前缀,使用请求参数里的phone值作为 key,等待时间设为 0 秒,锁的持续时间为 10 秒。我们会使用 Redis 来实现分布式锁,同时借助 S…...
Android TabLayout 使用进阶(含源码)
android:layout_height“match_parent” android:orientation“vertical” tools:context“.mode2.ClassificationActivity”> <com.google.android.material.tabs.TabLayout android:id“id/tab_layout” android:layout_width“match_parent” android:layout_he…...
数据库系统概论的第六版与第五版的区别,附pdf
我用夸克网盘分享了「数据库系统概论第五六版资源」,点击链接即可保存。 链接:https://pan.quark.cn/s/21a278378dee 第6版教材修订的主要内容 为了保持科学性、先进性和实用性,在第5版教材基础上对全书内容进行了修改、更新和充实。 在科…...
管理etcd的存储空间配额
如何管理etcd的存储空间配额 - 防止集群存储耗尽指南 本文基于etcd v3.4官方文档编写 为什么需要空间配额? 在分布式系统中,etcd作为可靠的键值存储,很容易成为系统瓶颈。当遇到以下情况时: 应用程序频繁写入大量数据未及时清理…...
深入浅出 NRM:加速你的 npm 包管理之旅
文章目录 前言一、NRM 是什么?二、为什么需要 NRM?三、NRM 的优势四、NRM 的安装与使用4.1 安装 NRM4.2 查看可用的 npm 源4.3 切换 npm 源4.4 测试 npm 源速度4.5 添加自定义 npm 源4.6 删除 npm 源 五、NRM 的进阶使用六、总结 前言 作为一名 JavaScr…...
ESP32开发学习记录---》GPIO
she 2025年2月5日,新年后决定开始充电提升自己,故作此记,以前没有使用过IDF开发ESP32因此新年学习一下ESP32。 ESPIDF开发环境配置网上已经有很多的资料了,我就不再赘述,我这里只是对我的学习经历的一些记录。 首先学习一个…...
stm32点灯 GPIO的输出模式
目录 1.选择RCC时钟 2.SYS 选择调试模式 SW 3.GPIO 配置 4.时钟树配置( 默认不变)HSI 高速内部时钟8Mhz 5.项目配置 6.代码 延时1s循环LED亮灭 1.选择RCC时钟 2.SYS 选择调试模式 SW 3.GPIO 配置 4.时钟树配置( 默认不变)…...
[paddle] 矩阵的分解
特征值 设 A A A 是一个 n n n \times n nn 的方阵, λ \lambda λ 是一个标量, v \mathbf{v} v 是一个非零向量。如果满足以下方程: A v λ v A\mathbf{v} \lambda\mathbf{v} Avλv 则称 λ \lambda λ 为矩阵 A A A 的一个 特征值…...
【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料
🧸安清h:个人主页 🎥个人专栏:【Spring篇】【计算机网络】【Mybatis篇】 🚦作者简介:一个有趣爱睡觉的intp,期待和更多人分享自己所学知识的真诚大学生。 目录 🎃1.修改密码 -持久…...
【深度学习】DataLoader自定义数据集制作
第一步 导包 import os import matplotlib.pyplot as plt %matplotlib inline import numpy as np import torch from torch import nn import torch.optim as optim import torchvision from torchvision import transforms,models,datasets import imageio import time impo…...
【Elasticsearch】Geo-distance聚合
geo_distance聚合的形状是圆形。它基于一个中心点(origin)和一系列距离范围来计算每个文档与中心点的距离,并将文档分配到相应的距离范围内。这种聚合方式本质上是以中心点为圆心,以指定的距离范围为半径的圆形区域来划分数据。 为…...