BabylonJS Toolkit Problems

MackeyK24 · November 4, 2017

Please post any BabylonJS Toolkit problems/issues you are having

HeadClot · November 7, 2017

OK - So I am struggling getting the dev environment setup due to the lack of docs.

MackeyK24 · November 7, 2017

3 hours ago, HeadClot said:

OK - So I am struggling getting the dev environment setup due to the lack of docs.

With What, Creating a project, or a more specific issue ???

MackeyK24 · November 7, 2017

I will have to check with @Deltakosh to see what the url to where the starter docs are. I created a Project.md page that outlines project creation.

HeadClot · November 9, 2017

On 11/7/2017 at 2:34 AM, MackeyK24 said:

With What, Creating a project, or a more specific issue ???

Just general project setup and creation. Some instructions on how to do this would be appreciated

MackeyK24 · November 9, 2017

On 11/8/2017 at 7:48 PM, HeadClot said:

Just general project setup and creation. Some instructions on how to do this would be appreciated

Docs coming soon... Im working on it best I can...

Edit: http://doc.babylonjs.com/resources/projects

Try that

MackeyK24 · November 11, 2017

Babylon Toolkit - Version 3.1.044 (Or Greater) Simplifies Project Setup And Now Has Built-in Detection For Default Node And Typescript Compiler Locations.

Also sports a new "Detect TypeScript Runtime Compilers" button for on demand updating of your default compiler locations.

Now use a Default 'Export' folder in your Unity Game Project Folder (Along Side The Assets Folder) that contains a complete ASP.NET (OR BASIC HTML IF NOT USING WEB.CONFIG) web server project containing all project assets including scripts

HeadClot · November 16, 2017

Thank you so much @MackeyK24

DADA_universe · October 9, 2018

Trying to follow the getting started video tutorial. Scene compiles well to the browser until I try out the scene controller script and keep getting this error as the build fails:

C:/Users/arigb/AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts(4030,14): error TS2687: All declarations of 'fullscreen' must have identical modifiers.
C:/Users/arigb/AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts(13881,14): error TS2687: All declarations of 'orientation' must have identical modifiers.
Assets/Babylon/Library/babylon.d.ts(250,5): error TS2687: All declarations of 'fullscreen' must have identical modifiers.
Assets/Babylon/Library/babylon.d.ts(293,5): error TS2687: All declarations of 'orientation' must have identical modifiers.
Assets/Babylon/Library/babylon.d.ts(293,5): error TS2717: Subsequent property declarations must have the same type. Property 'orientation' must be of type 'ScreenOrientation', but here has type 'string'.

Is this a version conflict or something else? Any ideas on what to do?

Edit: It's clearly a typescript issue. When I deactivate the 'build typescript files' toggle in the exporter, the project builds without errors, but then I get a blank blue scene in the preview browser

DADA_universe · October 9, 2018

What would be the advise for porting an existing game built in Unity to WebVR using babylontoolkit? Is this a viable approach or is the toolkit better suited to building projects from scratch.

I'm pretty new to all this and I've not seen any specific reference to this question, so I'm sorry if it's been addressed before.

DADA_universe · October 9, 2018

I have better agency with Javascript as I have no experience with Typescript, but trying to create a Javascript file via create > Babylon > new Javascript file" returns the following error:

Invalid generated unique path '' (input path 'Assets/[Game]/Scripts/Assets/NewScript.bjs')
UnityEditor.ProjectWindowUtil:StartNameEditingIfProjectWindowExists(Int32, EndNameEditAction, String, Texture2D, String)
Unity3D2Babylon.ExporterWindow:CreateJavacriptFile() (at Assets/Babylon/Sources/ExporterWindow.cs:337)

MackeyK24 · October 9, 2018

Try updating Typescript

npm i -g typescript

DADA_universe · October 10, 2018

Thanks, unfortunately, the update does not solve the problem.

DADA_universe · October 10, 2018

17 hours ago, DADA_universe said:

What would be the advise for porting an existing game built in Unity to WebVR using babylontoolkit? Is this a viable approach or is the toolkit better suited to building projects from scratch.

I'm pretty new to all this and I've not seen any specific reference to this question, so I'm sorry if it's been addressed before.

@MackeyK24, you seem the best person to ask, please your thoughts on this?

MackeyK24 · October 10, 2018

Yo @Sorskoot ... Hey man... i just saw your you tube using My Toolkit. You seem to be using the tools with no problems... you wanna chime in here for @DADA_universe

BTW... Did you ever figure out why your system is running SOOOOO SLOW... Was it because of recording ... That compile should be a few seconds... not minutes

MackeyK24 · October 10, 2018

Yo @Sorskoot

Also... I hope you figured out about the tsconfig.json that you should be in your root project folder... make sure this is visible inside VSCODE...

THEN YOU DONT NEED the /// reference tags at top of script files... VSCODE will find them where ever they are in the project...

And of course the VR Experience is on the Camera Rig now

DADA_universe · October 10, 2018

On 10/9/2018 at 3:20 PM, DADA_universe said:

Trying to follow the getting started video tutorial. Scene compiles well to the browser until I try out the scene controller script and keep getting this error as the build fails:

C:/Users/arigb/AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts(4030,14): error TS2687: All declarations of 'fullscreen' must have identical modifiers.
C:/Users/arigb/AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts(13881,14): error TS2687: All declarations of 'orientation' must have identical modifiers.
Assets/Babylon/Library/babylon.d.ts(250,5): error TS2687: All declarations of 'fullscreen' must have identical modifiers.
Assets/Babylon/Library/babylon.d.ts(293,5): error TS2687: All declarations of 'orientation' must have identical modifiers.
Assets/Babylon/Library/babylon.d.ts(293,5): error TS2717: Subsequent property declarations must have the same type. Property 'orientation' must be of type 'ScreenOrientation', but here has type 'string'.

Is this a version conflict or something else? Any ideas on what to do?

Edit: It's clearly a typescript issue. When I deactivate the 'build typescript files' toggle in the exporter, the project builds without errors, but then I get a blank blue scene in the preview browser

Phew.....happy to say after two days of struggling, I found a fix. I traced the error down to an issue with the babylon.d.ts file (compatibility issue with newer versions of typescript) and found an issue had been raised about it in the main babylon.js github repo and fixed just two days ago, (https://github.com/BabylonJS/Babylon.js/issues/5277) so I copied the fix from the preview build and replaced my babylon.d.ts file with it. It works now. It's great to have a repo that's being actively maintained. I'll continue exploring.....

ninespace · October 11, 2018

Hi Mackey,

Thanks for the awesome toolkit! I use Unity editor a lot and this really helps me to explore BabylonJS!

I have some questions tho... I created a ts class Door extends BABYLON.MeshComponent, and I would like to reference it from another script. How can I do it?

I have tried this.scene.getMeshByName("Door") from the other script, but it returns an AbstractMesh. How to link this back to the created MeshComponent?

I also tried creating a Door BabylonProperty in the EditorComponentScript hoping that this could get me the reference.

Thanks for your time!

MackeyK24 · October 11, 2018

You would use the SceneManager findSceneComponent function to find ANY component class on the specified OWER GAME OBJECT

So for Example if i want t o get a reference to the BABYLON.AnimationState component that is on an OWNER GAME OBJECT

let animator:BABYLON.AnimationState = this.manager.findSceneComponent("BABYLON.AnimationState", this.ownerMesh);

If you are trying to get a reference to a component from a script that is ALSO on the same OWNER GAME OBJECT

let animator:BABYLON.AnimationState = this.getComponent("BABYLON.AnimationState");

So to get a reference to Another Script Component on the SAME OWNER... Use this.getComponent... And to be to get a component from ANY game object use this.manager.findSceneComponent

To Get Custom Script just use your for class name:

let myComp = this.getComponent("PROJECT.MyScriptComponent");
myComp.ExampleMethodCall("blah");

Here is an example old ThirdPersonController script... Just take a look how i get references to OTHER Script Components

protected ready() :void {
            // Setup animation state component
            this.animator = this.getComponent("BABYLON.AnimationState");
            if (this.animator == null) { 
                BABYLON.Tools.Warn("Failed to locate animation state for: " + this.mesh.name);
            } else {
                // Disable Auto-Ticking
                this.animator.autoTicking = false;
            }
            // Setup character controller component
            this.character = this.getComponent("BABYLON.CharacterController");
            if (this.character == null) {
                BABYLON.Tools.Warn("Failed to locate character controller for: " + this.mesh.name);
            } else {
                this.baseFriction = this.character.getFriction();
                this.frictionLevel = this.baseFriction;
            }

}

Complete ThirdPersonController Example Script:

/* Babylon Mesh Component Template */

module BABYLON {
    export enum ThirdPersonLocomotion {
        Idle = 0,
        Walk = 1,
        Run = 2,
        Sprint = 3
    }
    export enum ThirdPersonCameraShoulder {
        Right = 0,
        Left = 1
    }
    export class ThirdPersonCameraSettings {
        public positionLeft:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        public positionRight:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        public lookXSensitivity:number = 2.5;
        public lookYSensitivity:number = 2.5;
        public minimumAngle:number = -30.0;
        public maximumAngle:number = 60.0;
        public rotationSpeed:number = 5.0;
        public fieldOfView:number = 70.0;
        public zoomFieldOfView:number = 30.0;
        public zooomSpeed:number = 3.0;
        public hideMeshDistance:number = 0.5;
        public movementLerpSpeed:number = 2.0;
    }
    export class ThirdPersonController extends BABYLON.MeshComponent {
        public movementVector:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        public runSpeed:number = 2.0;
        public walkSpeed:number = 1.0;
        public turnSpeed:number = 1.0;
        public jumpSpeed:number = 5.0;
        public sprintSpeed:number = 3.0;
        public enableInput:boolean = false;
        public rootMotion:boolean = false;
        public animator:BABYLON.AnimationState = null;
        public character:BABYLON.CharacterController = null;
        public cameraRig:BABYLON.AbstractMesh = null;
        public cameraPivot:BABYLON.AbstractMesh = null;
        public cameraSphere:BABYLON.AbstractMesh = null;
        public freeCamera:BABYLON.FreeCamera = null;
        public buttonJump:number = BABYLON.Xbox360Button.A;
        public keyboardJump:number = BABYLON.UserInputKey.SpaceBar;
        public buttonSprint:number = BABYLON.Xbox360Button.LeftStick;
        public keyboardSprint:number = BABYLON.UserInputKey.Shift;
        public buttonShoulder:number = BABYLON.Xbox360Button.Y;
        public keyboardShoulder:number = BABYLON.UserInputKey.Y;
        public baseFriction:number = 0.01;
        public frictionLevel:number = 0.0;
        public wheelInput:number = 0.0;
        public mouseXInput:number = 0.0;
        public mouseYInput:number = 0.0;
        public verticalInput:number = 0.0;
        public horizontalInput:number = 0.0;
        public cameraSettings:BABYLON.ThirdPersonCameraSettings = null;
        //public currentVelocity:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        //public currentDirection:BABYLON.ThirdPersonDirection = BABYLON.ThirdPersonDirection.Stationary;
        //public jumpingDirection:BABYLON.ThirdPersonDirection = BABYLON.ThirdPersonDirection.Stationary;
        public locomotionState:BABYLON.ThirdPersonLocomotion = BABYLON.ThirdPersonLocomotion.Idle;
        public locomotionSpeed:number = 0.0;
        private _meshRotator:BABYLON.MeshRotator = null;
        private _cameraRotation:BABYLON.Quaternion = BABYLON.Quaternion.Zero();
        private _cameraRotationX:number = 0.0;
        private _cameraRotationY:number = 0.0;
        private _autoActivateCamera:boolean = false;
        private _isCharacterJumping:boolean = false;
        private _isCharacterFalling:boolean = false;
        private _isCharacterSliding:boolean = false;
        private _isCharacterGrounded:boolean = false;
        private _isCharacterCrouched:boolean = false;
        private _isCharacterJumpFrame:boolean = false;
        private _inputMoveSpeed:number = 0.0;
        private _inputMoveVector:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        private _meshEulerAngles:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        private _pivotEulerAngles:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        private _cameraDestination:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        private _followCameraOffset:BABYLON.Vector3 = BABYLON.Vector3.Zero();
        private _followCameraShoulder:BABYLON.ThirdPersonCameraShoulder = BABYLON.ThirdPersonCameraShoulder.Right;
        public constructor(owner: BABYLON.AbstractMesh, scene: BABYLON.Scene, tick: boolean = true, propertyBag: any = {}) {
            super(owner, scene, tick, propertyBag);
            this._meshRotator = new BABYLON.MeshRotator(this.mesh);
            this._autoActivateCamera = this.getProperty("activateCamera", false);
            this.enableInput = this.getProperty("enableInput", false);
            this.rootMotion = this.getProperty("rootMotion", false);
            this.cameraSettings = new BABYLON.ThirdPersonCameraSettings();
            // Built-In Follow Camera Options
            var cameraOptions:any = this.getProperty("cameraOptions")
            if (cameraOptions != null) {
                this.cameraSettings.lookXSensitivity = cameraOptions.lookXSensitivity;
                this.cameraSettings.lookYSensitivity = cameraOptions.lookYSensitivity;
                this.cameraSettings.minimumAngle = cameraOptions.minimumAngle;
                this.cameraSettings.maximumAngle = cameraOptions.maximumAngle;
                this.cameraSettings.rotationSpeed = cameraOptions.rotationSpeed;
                this.cameraSettings.fieldOfView = cameraOptions.fieldOfView;
                this.cameraSettings.zoomFieldOfView = cameraOptions.zoomFieldOfView;
                this.cameraSettings.zooomSpeed = cameraOptions.zooomSpeed;
                this.cameraSettings.hideMeshDistance = cameraOptions.hideMeshDistance;
                this.cameraSettings.movementLerpSpeed = cameraOptions.movementLerpSpeed;
            }
            // Built-In Follow Camera Position
            var cameraPosition:any = this.getProperty("cameraPosition")
            this.cameraSettings.positionRight = BABYLON.Utilities.ParseVector3(cameraPosition, new BABYLON.Vector3(0.75, 1.0, -2.5));
            this.cameraSettings.positionLeft = new BABYLON.Vector3(-this.cameraSettings.positionRight.y, this.cameraSettings.positionRight.y, this.cameraSettings.positionRight.z);
            // Built-In Motor Options Support
            var motorProperties:any = this.getProperty("motorProperties")
            if (motorProperties != null) {
                this.runSpeed = motorProperties.runSpeed;
                this.walkSpeed = motorProperties.walkSpeed;
                this.turnSpeed = motorProperties.turnSpeed;
                this.jumpSpeed = motorProperties.jumpSpeed;
                this.sprintSpeed = motorProperties.sprintSpeed;
            }
        }
            
        protected ready() :void {
            // Setup animation state component
            this.animator = this.getComponent("BABYLON.AnimationState");
            if (this.animator == null) { 
                BABYLON.Tools.Warn("Failed to locate animation state for: " + this.mesh.name);
            } else {
                // Disable Auto-Ticking
                this.animator.autoTicking = false;
            }
            // Setup character conntroller component
            this.character = this.getComponent("BABYLON.CharacterController");
            if (this.character == null) {
                BABYLON.Tools.Warn("Failed to locate character controller for: " + this.mesh.name);
            } else {
                this.baseFriction = this.character.getFriction();
                this.frictionLevel = this.baseFriction;
            }
            // Setup character quaternion rotations
            if (this.mesh.rotationQuaternion == null) this.mesh.rotationQuaternion = BABYLON.Utilities.Euler(this.mesh.rotation.x, this.mesh.rotation.y, this.mesh.rotation.z);
            // Setup character controller camera rig
            this.cameraRig = new BABYLON.Mesh(this.mesh + "CameraRig", this.scene);
            this.cameraRig.position = this.mesh.position.clone();
            if (this.cameraRig.rotationQuaternion == null) this.cameraRig.rotationQuaternion = BABYLON.Utilities.Euler(this.cameraRig.rotation.x, this.cameraRig.rotation.y, this.cameraRig.rotation.z);
            this._followCameraOffset = this.mesh.position.subtract(this.cameraRig.position);
            // Setup character controller camera pivot
            this.cameraPivot = new BABYLON.Mesh(this.mesh + "CameraPivot", this.scene, this.cameraRig);
            this.cameraPivot.position = BABYLON.Vector3.Zero();
            if (this.cameraPivot.rotationQuaternion == null) this.cameraPivot.rotationQuaternion = BABYLON.Utilities.Euler(this.cameraPivot.rotation.x, this.cameraPivot.rotation.y, this.cameraPivot.rotation.z);
            // Setup third person free camera and sphere
            this.freeCamera = new BABYLON.FreeCamera(this.mesh + "FreeCamera", BABYLON.Vector3.Zero(), this.scene);
            this.freeCamera.position.copyFrom(this.cameraSettings.positionRight);
            this.freeCamera.rotationQuaternion = BABYLON.Quaternion.Zero();
            this.freeCamera.parent = this.cameraPivot;
            this.cameraSphere = BABYLON.Mesh.CreateSphere(this.mesh + "CameraSphere", 12, 0.5, this.scene);
            this.cameraSphere.position = BABYLON.Vector3.Zero();
            this.cameraSphere.isVisible = false; // DEBUG SETTING
            this.cameraSphere.visibility = 0.0 // DEBUG SETTING
            this.cameraSphere.parent = this.freeCamera;
            if (this._autoActivateCamera === true) this.scene.activeCamera = this.freeCamera;
        }
        
        protected update() :void {
            // Tick character controller
            this.updateCameraRotations();
            this.updateCameraPositions();
            this.updateCharacterMovement();
            //console.log("Grounded: " + this._isCharacterGrounded.toString(), " -> Jumping: " + this._isCharacterJumping.toString(), " -> Falling: " + this._isCharacterFalling.toString() + " -> Sliding: " + this._isCharacterSliding.toString());
        }
        
        protected after():void {
            // Process Locomotion Input
            this.frictionLevel = this.baseFriction;
            if (this.character == null) return;
            this._isCharacterJumping = this.character.isJumping();
            this._isCharacterFalling = this.character.isFalling();
            this._isCharacterSliding = this.character.isSliding();
            this._isCharacterGrounded = this.character.isGrounded();
            this._isCharacterCrouched = false;
            this._isCharacterJumpFrame = false;
            if (this.enableInput === true) {
                this.wheelInput = this.manager.getUserInput(BABYLON.UserInputAxis.Wheel);
                this.mouseXInput = this.manager.getUserInput(BABYLON.UserInputAxis.MouseX);
                this.mouseYInput = this.manager.getUserInput(BABYLON.UserInputAxis.MouseY);
                this.verticalInput = this.manager.getUserInput(BABYLON.UserInputAxis.Vertical);
                this.horizontalInput = this.manager.getUserInput(BABYLON.UserInputAxis.Horizontal);
                // Pseudo normalize dead zone input values
                var deadZone:number = BABYLON.UserInputOptions.GamepadDeadStickValue;
                if (this.horizontalInput >= -deadZone && this.horizontalInput <= deadZone) this.horizontalInput = 0.0;
                if (this.verticalInput >= -deadZone && this.verticalInput <= deadZone) this.verticalInput = 0.0;
              // Update diagonal movement scaling factor
                this._inputMoveVector.copyFromFloats(this.horizontalInput, 0.0, this.verticalInput);
                if (this._inputMoveVector.x !== 0.0 && this._inputMoveVector.z !== 0.0) {
                    this._inputMoveVector.scaleInPlace(BABYLON.Constants.DiagonalSpeed);
                }
                // Update user input movement speed vector
                this._inputMoveSpeed = this._inputMoveVector.length();
                if (this._inputMoveSpeed > 1.0) {
                    BABYLON.Vector3.NormalizeToRef(this._inputMoveVector, this._inputMoveVector);
                    this._inputMoveSpeed = this._inputMoveVector.length();
                }
                // Update grounded locomotion movement states
                if (this._inputMoveVector.x || this._inputMoveVector.z) this.frictionLevel = 0.0;
                if (this._isCharacterGrounded === true) {
                    var sprinting:boolean = (this.manager.getKeyboardInput(this.keyboardSprint) || this.manager.getGamepadButtonInput(this.buttonSprint))
                    if (this._inputMoveSpeed > 0.5) {
                        this.locomotionState = (sprinting === true) ? BABYLON.ThirdPersonLocomotion.Sprint : BABYLON.ThirdPersonLocomotion.Run;
                    } else if (this._inputMoveSpeed > 0.0) {
                        this.locomotionState = BABYLON.ThirdPersonLocomotion.Walk;
                    } else {
                        this.locomotionState = BABYLON.ThirdPersonLocomotion.Idle;
                    }
                    this.locomotionSpeed = this.getLocomotionSpeed();

                    //var forward = BABYLON.Utilities.GetForwardVector(this.mesh);
                    //var right = BABYLON.Utilities.GetRightVector(this.mesh);
                    //var move = forward.scale(this._inputMoveVector.z).add(right.scale(this._inputMoveVector.x));
                    //this.movementVector.x = move.x;
                    //this.movementVector.y = 0.0;                    
                    //this.movementVector.z = move.z;

                    // Update user input movement properties
                    this.movementVector.x = this._inputMoveVector.x;
                    this.movementVector.y = 0.0;                    
                    this.movementVector.z = this._inputMoveVector.z;
                    BABYLON.Utilities.TransformDirectionToRef(this.mesh, this.movementVector, this.movementVector);
                    
                    this.movementVector.scaleInPlace(this.locomotionSpeed);
                    // Update user input jumping frame state
                    this._isCharacterJumpFrame = (this.manager.getKeyboardInput(this.keyboardJump) || this.manager.getGamepadButtonInput(this.buttonJump));
                    if (this._isCharacterJumpFrame === true) {
                        //this.jumpingDirection = this.currentDirection;
                    }
                }
            }
        }
        
        protected destroy() :void {
            // Destroy character controller
            this.cameraSphere.dispose();
            this.cameraSphere = null;
            this.cameraPivot.dispose();
            this.cameraPivot = null;
            this.cameraRig.dispose();
            this.cameraRig = null;
            this.freeCamera.dispose();
            this.freeCamera = null;
            this.animator = null;
            this.character = null;
        }

        /* Private Character Controller Helper Functions */

        private getLocomotionSpeed():number {
            var speed:number = 0.0;
            if (this.rootMotion === true) {
                var rootSpeed:number = 1.0;
                speed = rootSpeed * this._inputMoveSpeed;
            } else {
                switch (this.locomotionState) {
                    case BABYLON.ThirdPersonLocomotion.Idle:
                        speed = 0.0;
                        break;
                    case BABYLON.ThirdPersonLocomotion.Walk:
                        speed = this.walkSpeed;
                        break;
                    case BABYLON.ThirdPersonLocomotion.Run:
                        speed = this.runSpeed;
                        break;
                    case BABYLON.ThirdPersonLocomotion.Sprint:
                        speed = this.sprintSpeed;
                        break;
                }
            }
            return speed; 
        }

        private updateCameraRotations():void {
            var deltaTime:number = this.manager.deltaTime;
            // Update camera left/right
            this._cameraRotationX += this.cameraSettings.lookXSensitivity * this.mouseXInput;
            this._cameraRotationX = BABYLON.Scalar.Repeat(this._cameraRotationX, 360);
            // Update camera up/down
            this._cameraRotationY += this.cameraSettings.lookYSensitivity * this.mouseYInput;
            this._cameraRotationY = BABYLON.Scalar.Clamp(this._cameraRotationY, this.cameraSettings.minimumAngle, this.cameraSettings.maximumAngle);
            // Update camera rotations
            BABYLON.Utilities.EulerToRef((this._cameraRotationY * BABYLON.Constants.Deg2Rad), (this._cameraRotationX * BABYLON.Constants.Deg2Rad), 0.0, this._cameraRotation);
            BABYLON.Quaternion.SlerpToRef(this.cameraPivot.rotationQuaternion, this._cameraRotation, this.cameraSettings.rotationSpeed * deltaTime, this.cameraPivot.rotationQuaternion);
        }
            
        private updateCameraPositions():void {
            var deltaTime:number = this.manager.deltaTime;
            // Updaye camera rig
            this.mesh.position.subtractToRef(this._followCameraOffset, this._cameraDestination);
            this.cameraRig.position.copyFrom(this._cameraDestination);
            //BABYLON.Vector3.LerpToRef(this.cameraRig.position, this._cameraDestination, (this.cameraSettings.movementLerpSpeed * deltaTime), this.cameraRig.position);
            // Updaye free camera
            var hit:boolean = false;
            // TODO: Dummy no hit
            if (this.cameraRig == null) {
                hit = true;
            }
            if (hit === true) {
                // Move Camera In Closer To Player
            } else {
                // Position free camera to current sholder
                if (this._followCameraShoulder === BABYLON.ThirdPersonCameraShoulder.Left) {
                    BABYLON.Vector3.LerpToRef(this.freeCamera.position, this.cameraSettings.positionLeft, (this.cameraSettings.movementLerpSpeed * deltaTime), this.freeCamera.position);
                } else {
                    BABYLON.Vector3.LerpToRef(this.freeCamera.position, this.cameraSettings.positionRight, (this.cameraSettings.movementLerpSpeed * deltaTime), this.freeCamera.position);
                }
            }
        }

        private updateCharacterMovement():void {
            // Update character rotation
            if (this.movementVector.x !== 0.0 || this.movementVector.z !== 0.0) {
                //this.mesh.rotationQuaternion.toEulerAnglesToRef(this._meshEulerAngles);
                //this.cameraPivot.rotationQuaternion.toEulerAnglesToRef(this._pivotEulerAngles);
                //BABYLON.Utilities.EulerToRef(this._meshEulerAngles.x, this._pivotEulerAngles.y, this._meshEulerAngles.z, this.mesh.rotationQuaternion);

                //var dir = new BABYLON.Vector3(-this.horizontalInput, 0, -this.verticalInput);
                //var pos = this.mesh.position.add(dir);
                //this._meshRotator.lookAtPosition(pos);
            }
            // Update character movement
            if (this.character != null) {
                //this.currentVelocity = this.character.getVelocity();
                //this.movementVector.y = this.currentVelocity.y;
                this.character.move(this.movementVector, this.frictionLevel, ((this._isCharacterJumpFrame === true) ? this.jumpSpeed : 0.0));
            }
            // Update character animation
            if (this.animator != null) {
                this.animator.setFloat("Locomotion", this.locomotionState as number);
                //this.animator.setFloat("Jumping", this.jumpingState as number);
                this.animator.setFloat("Forward", this._inputMoveVector.z);
                this.animator.setFloat("Turn", this._inputMoveVector.x);
                this.animator.setFloat("Speed", this._inputMoveSpeed);
                this.animator.setBool("isJumping", this._isCharacterJumping);
                this.animator.setBool("isFalling", this._isCharacterFalling);
                this.animator.setBool("isSliding", this._isCharacterSliding);
                this.animator.setBool("isCrouched", this._isCharacterCrouched);
                this.animator.setBool("isGrounded", this._isCharacterGrounded);
                if (this._isCharacterJumpFrame === true) {
                    this.animator.setTrigger("Jump");
                }
                // Note: Manually Ticking Anims
                this.animator.tickStateMachine();
            }
        }
    }
}

Hope that helps you get going

ninespace · October 12, 2018

Thanks for the detailed explanation and the huge example!

I think this.manager.findSceneComponent is what I need.

Many thanks :)

ninespace · October 14, 2018

Hi again Mackey,

I am back for more questions! I hope thats fine...

I got some models from Unity asset store to play with, and they are 23.5MB on disk.

However, in the browser preview I see the loading counter goes up to 189MB.

Is there something I should do to reduce the size?

Also, if I want to host the exported project on a NodeJS server, how should I do it?

Thanks again!!!

MackeyK24 · October 14, 2018

You wanna OPTIMIZE your geometry for WebGL.

The models on the asset store are really for the NATIVE Unity Environment. They are probably too HIGH POLY to run smoothly ... they probably have many prices and many materials... you wanna try optimize all that... Also try compression for the actual payload delivery... note the HttpModule handles this for ASP.NET web apps and the toolkit web server compress scene content automatically

As for NodeJS... I don’t really do NodeJS... but if anyone outlined how Babylon works in pure NodeJS environment with some example projects and then I can possibly add the support to toolkit to create node project as an option

ninespace · October 15, 2018

So if I just want to test BabylonJS in a .NET Server, what are the steps? Is .NET Core supported??

Sorry, not really a web guy here :(

MackeyK24 · October 15, 2018

You can literally HOST that Export folder as in IIS / ASP.NET

There are so many options... The toolkit itself HOST the export every time you hit build and preview... IT ALSO SUPPORTS Serving compressed content... Just look at the Web Browser Network Panel... On eof the columns shows the actual gzipped size that is transfer.

You could just Copy the Export folder to a hosting company like GODADDY... The bin folder has the HttpModule if you have that selected to export... and it generates the web.conifg that associates all the scene content stuff.

Dude... If you are using My Toolkit... You are literally ready to rock and roll for web release

Just HOST the Export folder somewhere (When not using the Toolkit for development)

BabylonJS Toolkit Problems

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members