How to use the babylonjs-gui.Control.VERTICAL_ALIGNMENT_TOP function in babylonjs-gui

To help you get started, we’ve selected a few babylonjs-gui examples, based on popular ways it is used in public projects.

github BabylonJS / Editor / src / editor / tools / default-scene.ts View on Github external
public static CreateLabel (gui: AdvancedDynamicTexture, mesh: Mesh, str: string, lines: boolean, width: string, height: string): Rectangle {
        // PBR GUI
        const label = new Rectangle(str);
        label.background = 'black'
        label.height = height;
        label.alpha = 0.5;
        label.width = width;
        label.cornerRadius = 20;
        label.thickness = 1;
        label.linkOffsetY = 30;
        label.top = '0%';
        label.zIndex = 5;
        label.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        label.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
        gui.addControl(label);

        const text = new TextBlock();
        text.text = str;
        text.color = 'white';
        label.addControl(text);
    
        if (!lines) {
            label.linkWithMesh(mesh);
            return label;
        }

        var line = new Line();
        line.alpha = 0.5;
        line.lineWidth = 5;
github brianzinn / create-react-app-babylonjs / src / with2DUI.js View on Github external
<StandardMaterial diffuseColor={Color3.Blue()} specularColor={Color3.Black()}/>
                </Box>
                <Box size={2} name="green box" position={new Vector3(2.5, 1, 0)}>
                  <StandardMaterial diffuseColor={Color3.Green()} specularColor={Color3.Black()}/>
                </Box>
                  {this.state.showModal === true &&
                    <Plane name="dialog" width={3} height={3* (dialogHeight/dialogWidth)} onCreated={this.setPlane}>
                      <AdvancedDynamicTexture name="dialogTexture" height={1024} width={1024} createForParentMesh={true}>
                        <Rectangle name="rect-1" background="white" color="#666666" height={dialogHeight/dialogWidth} width={1}
                          scaleY={dialogWidth} scaleX={1}  thickness={2} cornerRadius={12} >
                          <StackPanel name="sp-1">
                            <Rectangle name="rect-2" height="20%" paddingTop="6%">
                              <StackPanel name="sp-2" isVertical={false}>
                                <TextBlock name="selection-made" text="Selection Made" color="black" fontSize={28} fontStyle="bold"
                                  textHorizontalAlignment={Control.HORIZONTAL_ALIGNMENT_LEFT}
                                  textVerticalAlignment={Control.VERTICAL_ALIGNMENT_TOP}
                                  paddingLeft="2%" paddingTop="6%" width="80%"
                                />
                                <Button name="close-icon" background="white" paddingLeft="13%" width="18%" height="75%" onPointerDownObservable={this.hideModal.bind(this)}>
                                  <TextBlock text={'\uf00d'} fontFamily="FontAwesome" fontStyle="bold" fontSize={24} color="black" />
                                </Button>
                              </StackPanel>
                            </Rectangle>
                            <Rectangle name="rect-3" height="60%" thickness={2} color="#EEEEEE">
                              <StackPanel name="sp-3">
                              <TextBlock name="description" key={`body-${this.state.clickedMeshName}`} text={`You have clicked on '${this.state.clickedMeshName}' .\n....${this.state.allowedMeshes.length} remaining...`}
                                  color="black" fontSize={28} textWrapping={true} height="40%"
                                  textHorizontalAlignment={Control.HORIZONTAL_ALIGNMENT_LEFT}
                                  textVerticalAlignment={Control.VERTICAL_ALIGNMENT_TOP}
                                  paddingLeft="2%" paddingTop="6%"
                                />
                                {
github brianzinn / create-react-app-babylonjs / src / remixMeshMashup / index.js View on Github external
<StackPanel name="sp-1" isVertical={false} padding={0.05}>
                          <InputText name="searchInputText" text={this.state.searchText} color='white' fontSize={36} width={0.8} onTextChanged={this.updateSearchTextBabylon} />
                          <Button name="button" background="#FFAF00" width={0.2} cornerRadius={10} onPointerDown={this.doSearch}>
                            <StackPanel name="sp-2" isVertical={false} padding={0.05}>
                              <TextBlock key="search-text" name="search-text" text='Search' fontStyle="bold" fontSize={36} color="black" width={0.7} />
                              <TextBlock key="search-icon" name="search-icon" text={'\uf002'} fontFamily="FontAwesome" fontSize={36} color="black" width={0.3} />
                            </StackPanel>
                          </Button>
                        </StackPanel>
                    </Rectangle>
                  </AdvancedDynamicTexture>
                </Plane>
                <Plane name="keyboard" width={1} height={1/4} position={new Vector3(0, -(0.6 + 1/8), -2.1414)} rotation={new Vector3(Math.PI / 4, 0, 0)} >
                  <AdvancedDynamicTexture height={1024} width={1024} createForParentMesh={true} onlyAlphaTesting={true}>
                    <Rectangle color="white" height={1/4} scaleY={4}>
                      <VirtualKeyboard connectControlNames={['searchInputText']} defaultKeyboard={true} disableOffFocus={true} verticalAlignment={ Control.VERTICAL_ALIGNMENT_TOP } />
                    </Rectangle>
                  </AdvancedDynamicTexture>
                </Plane>
                {this.state.model &&
                  <ScaledModelWithProgress key={this.state.model.key} rootUrl={this.state.model.rootUrl} sceneFilename={this.state.model.sceneFilename} scaleTo={2} 
                    progressBarColor={Color3.FromInts(255, 165, 0)} center={new Vector3(0, 0, 0)}
                    pluginExtension={this.state.model.fileExtension}
                    modelRotation={new Vector3(0, this.state.model.yRotation, 0)} progressRotation={new Vector3(0, Math.PI, 0)}
                    estimatedFileSize={this.state.model.fileSize * 0.85}
                  />
                }

                <VRExperienceHelper webVROptions={{createDeviceOrientationCamera: false}} teleportEnvironmentGround={true} enableInteractions={true} />
                <EnvironmentHelper enableGroundShadow={true} groundYBias={1} mainColor={Color3.FromHexString("#74b9ff")} />
              </Scene>
            </Engine>