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

相关推荐
brzhang2 分钟前
面试官:讲讲 gRPC?别慌,老码小张带你从原理到实践彻底搞懂它!
前端·后端·架构
天天扭码4 分钟前
我使用Coze十分钟搭建了一个AI应用——创意写真馆
前端·ai编程·coze
专业掘金7 分钟前
0428 手打基础丸
前端
张开心_kx12 分钟前
面试官又问我受控组件和非受控组件?
前端·javascript·react.js
stanny13 分钟前
MCP(下)——跟着官方实现一个MCP
javascript·mcp
brzhang15 分钟前
流量大了就加机器?太 Low 了!负载均衡的这些高级玩法,让你部署、测试、安全一步到位!
前端·后端·架构
LavenderLee15 分钟前
CSS+JS实现融球+跟随鼠标效果
前端
我是哪吒16 分钟前
分布式微服务系统架构第122集:NestJS是一个用于构建高效、可扩展的服务器端应用程序的开发框架
前端·后端·面试
学了就忘17 分钟前
JavaScript 异步编程与请求取消全指南
开发语言·javascript·ecmascript
凯哥197019 分钟前
Sciter.js 指南 - GUI的窗口管理特性详解
前端