新建 vue 项目
vue create babylonjs-vue-app
安装 babylon.js
yarn add @babylonjs/core
在根组件 App.vue 测试，测试用例来源 迈出第一步-让babylon运行起来 注意：所有代码写在 mounted() 内，vue 示例挂载后，dom 元素渲染后才能获取
<template>
<canvas id="renderCanvas"></canvas>
</template>
<script>
import * as BABYLON from "@babylonjs/core/Legacy/legacy";
export default {
data() {
return {};
},
mounted() {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera(
"Camera",
Math.PI / 2,
Math.PI / 2,
2,
new BABYLON.Vector3(0, 0, 5),
scene
);
camera.attachControl(canvas, true);
var light1 = new BABYLON.HemisphericLight(
"light1",
new BABYLON.Vector3(1, 1, 0),
scene
);
var light2 = new BABYLON.PointLight(
"light2",
new BABYLON.Vector3(0, 1, -1),
scene
);
var sphere = BABYLON.MeshBuilder.CreateSphere(
"sphere",
{ diameter: 2 },
scene
);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
},
};
</script>
<style>
html,body,#app {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
