前端工业级3d框架,babylon.js入门(1)

依赖安装

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

相关推荐
速易达网络28 分钟前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘33 分钟前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way35 分钟前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家1 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽3 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头3 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全4 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing4 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript