babylon 3d引擎技巧
1）npm安装

npm i babylonjs --save
npm i babylonjs-gui --save

ts代码里面引用

import * as BABYLON from "babylonjs";
import * as GUI from 'babylonjs-gui';

设置坐标 sphere.position.y = 1;

2) babylon中文文档
3) 各种例子 http://www.babylonjs.com.cn/examples/index.html
4）babylon GUI界面 https://gui.babylonjs.com/
5）加载gui, npm install --save babylonjs babylonjs-gui

let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
let loadedGUI = await advancedTexture.parseFromURLAsync("https://doc.babylonjs.com/examples/ColorPickerGui.json");

let matPicker = advancedTexture.getControlByName("MatColor");

公开的资源库 https://github.com/BabylonJS/Assets
官方美术资源 https://doc.babylonjs.com/toolsAndResources/assetLibraries/availableTextures
官方代码片段 https://doc.babylonjs.com/toolsAndResources/utilities
官方游戏例子 https://doc.babylonjs.com/guidedLearning/createAGame
gui文档 https://editor.babylonjs.com/_doc/00%20-%20welcome/doc.html
编译器的使用 https://doc.babylonjs.com/communityExtensions/editor/scripting/attachingScripts
6）加调试界面,index.html里面加引用
<script src="https://cdn.babylonjs.com/babylon.js"></script>`
代码里面加一行this.scene.debugLayer.show();
7）加载本地模型

    BABYLON.SceneLoader.Append("scenes/BoomBox/", "BoomBox.gltf", scene, function (scene) {
        scene.createDefaultCameraOrLight(true, true, true);
        scene.activeCamera.alpha += Math.PI;
    });

8）图片使用，2种方法，GUI里面的Image,和自带的Sprite

        var advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
        var image = new GUI.Image("but", "https://www.babylonjs-playground.com/textures/Logo.png");
        image.width = 0.4;
        image.height = 0.4;
        advancedTexture.addControl(image);

        // 放在public目录下面，要写图片的宽高和比例
        const spriteManagerTrees = new SpriteManager("treesManager", "/aaa.png", 2000, { width: 300, height: 600 }, this.scene);
        const tree = new Sprite("tree", spriteManagerTrees);
        tree.width = 1;
        tree.height = 2;

9）button按钮的类型，CreateSimpleButton，CreateSimpleButton

    var addButton = function (text, callback) {
        var button = BABYLON.GUI.Button.CreateSimpleButton("button", text);
        button.width = "140px";
        button.height = "40px";
        button.color = "white";
        button.background = "green";
        button.paddingLeft = "10px";
        button.paddingRight = "10px";
        button.onPointerUpObservable.add(function () {
            callback();
        });
        panel.addControl(button);
    }

    addButton("Play", function () {
        animationGroup.play(true);
    });

10）堆栈容器StackPanel，水平或垂直方向，来堆叠子对象，
11） 控件 作用
TextBlock 文本块，可以用于显示简单的文本
InputText 文本输入框，可以让用户在其中填写文本
Checkbox 复选框
RadioButton 单选按钮
Slider 滑块，可以用来在一个范围内控制一个值
Line 线段，在两点之间绘制一条线
MultiLine 多线，可以在任意数量的网格、控件、点之间绘制线
ColorPicker 拾色器，可以让用户在其中挑选颜色
DisplayGrid 显示网格，用于在GUI内部显示网格
VirtualKeyboard 虚拟键盘
12）GUI的点击交互
事件 触发条件
onPointerMoveObservable 当光标移到控件上方时触发，仅在全屏模式下可用
onPointerEnterObservable 当光标进入控件时触发，仅在全屏模式下可用
onPointerOutObservable 当光标离开控件时触发，仅在全屏模式下可用
onPointerDownObservable 当指针在控件上向下时触发
onPointerUpObservable 当指针在控件上时触发
onPointerClickObservable 单击控件时触发
onClipboardObservable 触发剪贴板事件时触发
13) 更换图片内容 image.source = '/newImagName.png'; 图片放在public目录下面。
当不懂api的时候，可以直接去源码里面看接口，这是个好办法。
14)text1.isEnabled = false 设置不能点击，不然都会影响到按钮的点击
15）button边框不要高亮 abcButton.thickness = 0;
16）new GUI.TextBlock的文本一定要设置heightInPixels，不然 new GUI.StackPanel()出来的，不会自动加高度！！！
坑死
17）标签事件，控件必须control.isPointerBlocker = true。默认情况下，按钮上默认是true，其他图像等控件上默认是false
18）Rectangle的.isEnabled = false不能乱设置，会导致里面的按钮点不了。
let btmRect = new GUI.Rectangle("btmRect");

    btmRect.width = 0.8
    btmRect.height = 0.33
    btmRect.height = 0.33
    btmRect.top = "28%"
    btmRect.thickness = 0

19）

标签: none

添加新评论