Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

How do you activate the extensions included in the npm babylonjs library.

dyw

By dyw,
in Questions & Answers

 Share

Recommended Posts

dyw Newbie

dyw

Posted
Posted

Good evening all,

 

My name is Christopher, and I have decided to use the Babylonjs npm repo.

Question

Once you include the babylonjs npm library through npm install how do you activate the extensions which are included? the attached file-structure.png shows the file-tree which is created in node_modules after using npm install. I am trying to use the included gui extension specifically.

Environment

Angular, Node, and Express, compiled using webpack

Library

npm babylon js

To install the npm library into my project's node_modules: 

npm install --save babylonjs

then my component has the import statement below: 

import * as BABYLON from 'babylonjs';

The above statement will utilize the babylon.module.d.ts file in the attached image and babylon.max.js

This lets me use the BABYLON class with types perfectly as expected.

However, none of the files in the gui folder in the attached image are hooked up. How would I go about activating this extension??

 

Solutions I've attempted thus far

0) just a normal import of the main babylonjs module: 

import * as BABYLON from 'babylonjs';

All core BABYLON methods and properties are accessible. However, BABYLON.GUI gives the following typescript error: "Property 'GUI' does not exist on 'typeof BABYLON'." Which is to be expected, since none of the gui files are hooked up.

 

1) using CDN for everything in index.html. 

<head>

    <!-- base href="/" is used for angular2 routing -->
    <base href="/">
    <title>some website</title>
    <link id="favicon" rel="icon" href="public/assets/favicon.png">
    
    <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/oimo.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

</head>

    This works, however, is not ideal, and defeats the purpose of the npm library. Also, the typescript definition files have to be maintained separate, either through the tsconfig.json, or in the component with a ///ref tag, and is very finecky.

2) using npm for babylon, and CDN for gui.

    Does not work, this method throws errors, because the CDN script tag in the head of index.html is compiled before the npm module, meaning the babylon class this extension extends does not exist at that time.

3) Using a second import to try to include the BABYLON.GUI class extension. 

import * as BABYLON from 'babylonjs';
import 'babylonjs/preview release/gui';

there is no .module file in the gui filepath so npm doesn't find anything there, so the second import fails.

 

I've looked everywhere, including the docs and haven't found a clear solution. So how do we activate these extensions? They are included in the npm repo so naturally the devs want us to use them, and I'd love to take advantage of them :) 

 

file-structure.png

Link to comment
Share on other sites
dyw Newbie

dyw

Posted
  • Author
Posted
1 hour ago, Deltakosh said:

We could add module info for Gui or you can use cdn for everything?

Well the CDN works, but this is with non-fatal typescript errors. I believe it's because there's no BABYLON object directly declared in the component file. This unfortunately makes typescript angry, and breaks the intellisense as well.

Also, the npm implementation has al ot of benefits for node projects, which would be lost using the CDN.

  • EG. In my implementation Babylon is only used in www.website.com/lore with the CDN the resources will be loaded in every other page of the website as well since the script tags are in the head, making the rest of the website slightly slower to load.

 I was thinking there was an oversight on my end in regards to activating the included extensions in the npm repo, so is there currently no solution implemented for activating these modules included in the npm repo? If not I wouldn't mind helping.

Link to comment
Share on other sites
GameMonetize Grand Master

GameMonetize

Posted
Posted

Let's make an experiment :)

Can you tell me if adding this file to the node modules helps with referencing the GUI: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/gui/babylon.gui.d.ts

You may want to add export = BABYLON.GUI at the end as well

 

If this works, I'll make sure to update the npm ;)

Link to comment
Share on other sites
dyw Newbie

dyw

Posted
  • Author
Posted

Hmm, well that same .d.ts file is already included in the node modules directory from the picture attached at filepath /babylonjs/dist/preview release/gui/babylon.gui.d.ts

 

I tried placing it into the same directory as the main babylon.module.d.ts file, I also added the export statement to the bottom of the gui.d.ts file. In addition I tried adding the below tag to the top and bottom of the module.d.ts file in hopes it would include the tyings for this project in the main typescript file. It neither had a change. 

/// <reference path="./gui/babylon.gui.d.ts" />

 

Link to comment
Share on other sites
dyw Newbie

dyw

Posted
  • Author
Posted

I just submitted a feature request/bug report on the github repo. I believe this is something which warrants some refactoring of the type definitions. 

The link is here and goes in depth on my new findings.

 

Let me know what you think, I'll be more than happy to make a pull request if you all think this is the right direction.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...