BabyLon.js 6.0 学习笔记之 GUI （一）

最新推荐文章于 2024-05-07 08:53:02 发布

locus321

最新推荐文章于 2024-05-07 08:53:02 发布

阅读量762

点赞数

分类专栏： WebGPU 文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/locus321/article/details/133799902

版权

WebGPU 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简介

之前有专题内容介绍有关Babylon.js的3D渲染，这里另起一题，来讲讲GUI，主要是想搞清楚如何进行网页交互与数据可视化。这一篇讲如何加载在线编辑的GUI在网页上显示。

从官网教程入手

我相信官网的原因主要是上面的API应该是最新的，方便自己跟踪最新的技术内容。那么有关API的参考在这里可以看到—> How To Use Babylon GUI
在这里插入图片描述
这里有不少好东西哦

首先是源码，包含了2D/3D GUI的例子 : https://github.com/BabylonJS/Babylon.js/tree/master
可交互的Demo : https://www.babylonjs.com/demos/gui/
在源码底下的链接里能找到：
- 在线Babylon编译器，能够实时生成效果，还能切换编译语言和渲染器： https://playground.babylonjs.com/
- 在线Shader编译器： https://cyos.babylonjs.com/
- 在线模型查看器，沙盒： https://sandbox.babylonjs.com/
- 生成 .babylon 文件的转换器（3DS Max/Maya/Blender/Unity 5）
- glTF 格式工具的使用

在线GUI Editor

Babylon官网提供了一个在线GUI编辑器，供新手入门：https://gui.babylonjs.com/
在这里可以用图形化界面创建UI布局，目前就了解到这，不清楚这里能不能建立交互逻辑。
在这里插入图片描述

创建一个简单UI
- 修改下画布色和背景色
- 放置控件
- 保存控件配置
  点击左上角菜单栏里的 SAVE 会保存成一个 guiTexture.json文件，当然你也可以点击 LOAD 加载一个json配置，然后继续编辑

创建一个2D GUI 工程

我们尝试创建一个2D GUI 工程，这里需要参考 BabyLon.js 6.0 学习笔记（一）安装好WebGPU的开发环境。
搭建文件目录
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css">
    <title>BABYLON.JS GUI</title>
  </head>
  <body>
    <canvas id="renderCanvas"></canvas>
    <script type="module" src="/main.js"></script>
  </body>
</html>

package.json

{
  "name": "babylontut",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@babylonjs/core": "^6.9.0",
    "@babylonjs/inspector": "^6.9.0",
    "vite": "^4.3.2"
  },
  "dependencies": {
    "@babylonjs/gui": "^6.10.0"
  }
}

stycle.css

html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

main.js

import * as BABYLON from '@babylonjs/core';
import {Inspector} from '@babylonjs/inspector';
import * as GUI from '@babylonjs/gui/2D';

const canvas = document.getElementById('renderCanvas');

const engine = new BABYLON.Engine(canvas);

const createScene = async function() {
  const scene = new BABYLON.Scene(engine);

  const camera = new BABYLON.ArcRotateCamera('camera', 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
  camera.attachControl(true);
  camera.wheelDeltaPercentage = 0.02;
  camera.setPosition(new BABYLON.Vector3(0, 0, 10));

  const torus = new BABYLON.MeshBuilder.CreateTorus('mySphere', {
    diameter: 3,
    thickness: 1,
    tessellation: 80
  });
  torus.position.x = -4;

   scene.registerBeforeRender(function() {
    torus.rotation.x -= 0.01; 
    torus.rotation.z -= 0.01; 
  });
  
  const pbr = new BABYLON.PBRSpecularGlossinessMaterial('pbr', scene);
  torus.material = pbr;
  pbr.diffuseColor = new BABYLON.Color3(1, 234/255, 0);
  pbr.glossiness = 1;
  pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData('https://playground.babylonjs.com/textures/environment.dds', scene);
  pbr.specularGlossinessTexture = new BABYLON.Texture('source/texture.png', scene);

  //GUI
  const advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI');
  //编辑GUI控件内容
  
    return scene;
}

const scene = await createScene();

engine.runRenderLoop(function() {
  scene.render();
});
  
window.addEventListener('resize', function() {
  engine.resize();
});

CTRL+SHIFT+` 调出命令行安装依赖库

npm install

编译运行

npm run dev

可以看到一个有纹理贴图的环，虽然这个颜色不太好看
在这里插入图片描述

通过json加载预制GUI

我们在main.js 代码中添加一句，就可以加载之前已经编辑好的json，来快速生成GUI

把 guiTexture.json 导入public路径
在 return scene;之前添加语句：

  const loadedGUI = await advancedTexture.parseFromURLAsync('/guiTexture.json');

在这里插入图片描述

locus321

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BabyLon.js 6.0 学习笔记之 GUI （一）

之前有专题内容介绍有关Babylon.js的3D渲染，这里另起一题，来讲讲GUI，主要是想搞清楚如何进行网页交互与数据可视化。这一篇讲如何加载在线编辑的GUI在网页上显示。
复制链接

扫一扫