依赖安装

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，不过有点过于简陋了，下篇搞个小人走路试试。

前端工业级3d框架，babylon.js入门（1）

依赖安装

DEMO1

事前准备

场景创建