依赖安装
sql
yarn add @babylonjs/core
先装个核心的依赖,code,其他还有@babylonjs/gui
、@babylonjs/havok
、@babylonjs/loaders
,暂时不知道是干啥的,用的时候再说吧。
DEMO1
事前准备
直接就在vue里写了,省事,创建个canvas
作为容器使用。
vue
<template>
<div class="canvas-wrapper">
<canvas id="canvas" ref="canvasRef" width="500px" height="500px" />
</div>
</template>
<style>
.canvas-wrapper {
width: 500px;
height: 500px;
}
</style>
场景创建
ts
<script setup lang="ts">
import { ref, shallowRef, onMounted } from 'vue';
import {
Engine, // 引擎
Scene, // 场景
ArcRotateCamera, // 角旋转相机
Vector3, // 三维向量
HemisphericLight, // 方向光
AxesViewer, // 辅助坐标轴
MeshBuilder,
StandardMaterial,
Color3
} from '@babylonjs/core';
const canvasRef = ref();
// 引擎实例用shallowRef存一下
const engineValue = shallowRef();
const sceneValue = shallowRef();
function init() {
const engine = new Engine(canvasRef.value, true);
engineValue.value = engine;
const scene = new Scene(engine);
sceneValue.value = scene;
const camera = new ArcRotateCamera(
'camera1', // 相机名称
0, // 定义相机沿经度轴的旋转角度
0, // 定义相机沿纬度轴的旋转角度
10, // 定义相机距离目标点的距离
Vector3.Zero(), // 定义相机目标点,这里使用0向量,即0,0,0点
scene // 定义相机所属的场景
);
/**
* 为相机启动鼠标控制,第一个参数是为了兼容历史版本保留的,
* 现在无用,如果要使用第二个参数,第一个参数传入null即可,
* 第二个参数是是否在鼠标事件触发时不调用preventdefault,
* 传入true则不调用,默认undefined也就是false。
*/
camera.attachControl(null, false);
// 设置相机位置
camera.setPosition(new Vector3(50, 40, 15));
// 定义一个方向光, 传入光源名称,方向向量,所属场景
const light = new HemisphericLight('light1', new Vector3(3, 2, 1), scene);
// 给场景加入坐标系辅助,传入所属场景和坐标轴线长度,无需保存到全局变量中
new AxesViewer(scene, 10);
run();
addBox();
}
function addBox() {
// 以上是之前的构造函数
// 以下是创建立方体的步骤
// 创建一个立方体,传入尺寸参数和所属场景
const box = MeshBuilder.CreateBox(
'box1',
{
height: 5,
width: 6,
depth: 7,
},
sceneValue.value
);
// 创建一个材质,传入所属场景
const material = new StandardMaterial('boxMat', sceneValue.value);
// 设置材质的漫反射颜色
material.diffuseColor = Color3.Blue();
// 将立方体的材质设为上面定义的材质
box.material = material;
}
function run() {
// 调用引擎的循环渲染函数,在函数中调用场景的渲染函数
engineValue.value.runRenderLoop(() => {
sceneValue.value.render();
});
// 监听窗口变化,调用resize函数
window.addEventListener('resize', () => {
engineValue.value.resize();
});
}
onMounted(() => {
// 启动一下
init();
});
效果如下:
babylon版本的hello world
,不过有点过于简陋了,下篇搞个小人走路试试。