本教程使用 vue3 + typescript + babylonjs 开发。

使用Vite构建Vue

使用Vite构建Vue开发环境，步骤参考官网文档https://vitejs.cn/guide/。

安装Babylonjs

按照官网教程创建完毕，进入项目根目录，执行yarn add babylonjs -s安装babylonjs。

改造页面

删除脚手架生成的HelloWorld.vue文件，将App.vue文件改造成如下代码：

  1. <script setup lang="ts">
  3. </script>
  5. <template>
  6.   <canvas id="container" ></canvas>
  7. </template>
  9. <style>
  10. html,
  11. body,
  12. #app,
  13. #container {
  14.   margin: 0;
  15.   width: 100%;
  16.   height: 100%;
  17. }
  18. </style>

至此，页面中只有一个充满整个页面的canvas元素，而它将作为3D场景的画板，我们可以在上面构建3D世界了。

版本

我的package.json内容如下：

  1. {
  2.   "name": "babylonjs-build",
  3.   "version": "0.0.0",
  4.   "scripts": {
  5.     "dev": "vite",
  6.     "build": "vue-tsc --noEmit && vite build",
  7.     "preview": "vite preview"
  8.   },
  9.   "dependencies": {
  10.     "babylonjs": "^4.2.0",
  11.     "vue": "^3.2.25"
  12.   },
  13.   "devDependencies": {
  14.     "@vitejs/plugin-vue": "^2.0.0",
  15.     "typescript": "^4.4.4",
  16.     "vite": "^2.7.2",
  17.     "vue-tsc": "^0.29.8"
  18.   }
  19. }