Custom Script Issues

Bugs
1

I have a simple example project with a sphere and cube. The Cube has a custom script called “Spin” that simply spins on the Y axis. At first, the custom script worked in the Editor but it does not load at runtime in my app with this warning:

BJS - [08:37:56]: Script named “Spin” has been ignored on object “Cube” as there is no exported script. Please use “exportScript(ctor);” or export the script as default class for ES6 support."

I am loading the metadata when I load the scene:

SceneLoader.Append(
  `${scenePath}`,
  `${sceneFile}`,
  this._bootstrapScene,
  (scene: Scene) => {
     /**/ 
    // Load extensions
    let projectPath = `${scenePath}${projectFile}`;
    Tools.LoadFile(
      projectPath, (data: string) => {
      console.log(`Loaded ${projectPath}`);
      // Apply extensions (such as custom code, custom materials etc.)
      Extensions.RootUrl = scenePath;
      Extensions.ApplyExtensions(scene, JSON.parse(data));
    });
    /**/

    this._sceneStack.push(scene);
  }
);

I am attempting to use Typescript/ES6 with Webpack.

image

I load from the “Export Final Scene & Assets” export workflow. The scene loads properly at runtime except this warning/issue. I have attached the editor files and you can see the custom script is in there and assigned to Cube. Now it does not run in the Editor, either.

simple.zip (92.1 KB)

2

Why not just make a external function called spin that accepts a target mesh and move that function off of the meshes scope.

3

I’m trying to establish a workflow with the Babylon Editor (despite the Editor fighting me quite a bit :cry:) that is similar to a Unity-style workflow. Ideally I can load a scene at runtime with some minimal bootstrapping. The script itself is pretty standard so I didn’t think it was worth including but here it is:

import { Scene, Color4, Mesh, Axis } from 'babylonjs';

export default class Spin implements IScript {
    // Public members
    public blackColor = new Color4(0, 0, 0, 1);

    /**
     * Constructor
     */
    constructor (public mesh: Mesh, public scene: Scene) {

    }

    /**
     * Called once starting the script
     */
    public start (): void {
        // You can access the scene everywhere
        this.scene.clearColor = this.blackColor;

        // You can access the attached object everywhere
        console.log(this.mesh);
    }

    /**
     * Called on each frame
     */
    public update (deltaTimeMs: number): void {
        this.mesh.rotation.y += 0.01;
    }

    /**
     * Called once the attached object has been disposed
     */
    public dispose (): void {
        // Called once the attached object has been disposed
    }
}

// Export the script as an attached script
// (attached to a node or scene)
exportScript(Spin);
4

Pinging @julien-moreau

1 Like
5

Could the fact I’m using SceneLoader.Append vs Load be an issue?

This is a WebXR project so _bootstrapScene is nothing more than one built at runtime using createDefaultEnvironment and createDefaultXRExperienceAsync.

6

@julien-moreau From looking at this pending merge, it appears that maybe I’m too much on the cutting edge? Any thoughts of when this one will get merged in?

7

Hey @MugOfPaul you are totally right :slight_smile:
The support of ES6 modules is still WIP. Are you familiar with webpack? I’m having some warnings when I try my fixes and help from a webpack pro would be really appreciated =D

I’m sharing a preview of the latest editor version today.

8

You can find the preview version here: http://editor.babylonjs.com/electron/preview/BabylonJS%20Editor%20Setup%203.2.1-beta.4.exe

The workflow is changing a little bit. The editor doesn’t work with deltas anymore. Each scene you import will be added the the “Meshes” assets tab and will be fully handled by the editor (means it makes a copy). This reduces the possible errors coming from loading/saving scenes.
Now, EVERYTHING is saved in the editor project (including geometries).

A Youtube video tutorial is coming soon!

9

Great to hear progress is being made @julien-moreau! I’m on a Mac so I can’t test that preview but I can fork the ES6 branch and build/run that if it’s the same thing? I personally don’t think losing the deltas is an issue.

My webpack is very simple (I am no expert!):

const path = require('path');

module.exports = {
    entry: './app.ts',

    output: {
        path: path.resolve(__dirname, '../public'),
        filename: 'bundle.js',
    },
    
    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            options: {
                configFile: "./tsconfig.json",
            }
        }]
    },
    devtool: 'cheap-module-eval-source-map',
}

And the tsconfig:

{
    "compilerOptions": {
        "module": "es6",
        "target": "ES6",
        "moduleResolution": "node",
        "skipLibCheck": true,
    }
}

My package.json is pretty simple too (I do hope that litegraph dependency goes away for runtime projects… It’s pretty hefty but necessary currently):

"dependencies": {
    "@babylonjs/core": "^4.1.0-beta.23",
    "@babylonjs/gui": "^4.1.0-beta.23",
    "@babylonjs/loaders": "^4.1.0-beta.23",
    "@babylonjs/materials": "^4.1.0-beta.23",
    "babylonjs-editor-es6": "^3.2.1-beta.3",
    "cannon": "^0.6.2",
    "earcut": "^2.2.2",
    "gl-matrix": "^3.1.0",
    "javascript-astar": "^0.4.1",
    "litegraph.js": "^0.7.3",
    "webxr-polyfill": "^2.0.1"
  },
10

@MugOfPaul
Sure you can use the ES6 branch and build it yourself :slight_smile:
Anyway I’m going to share you a Mac build as well.

Thanks for sharing!
When you watch or build with your webpack, do you have a warning coming from the module “babylonjs-editor-es6”? I have one here.
Also, don’t forget to update to “3.2.1-beta.4” :slight_smile:

11

Me too :slight_smile:

12

Yes I do get the warning. Here’s the relevant part of my app.ts:

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
import { Tools } from "@babylonjs/core/Misc/tools";
import "@babylonjs/core/Lights/hemisphericLight";
import "@babylonjs/materials/custom";
import "@babylonjs/core/Loading/Plugins/babylonFileLoader";
import "@babylonjs/core/Meshes/meshBuilder";

import { Extensions } from "babylonjs-editor-es6";

import * as cannon from "cannon";
import WebXRPolyfill from 'webxr-polyfill';

My html is only this below. I didn’t see the need for importing PEP like a lot of the examples do but then again my project is very simple for now.

<script src="bundle.js" type="text/javascript"></script>

13

@MugOfPaul
Thanks, good to know. I’m trying to remove this warning but I don’t really understand how to :slight_smile:
Also, if you watch, does webpack re-compiles each seconds? Or recompiles only when you change a file?

In my case, webpack recompiles each second after 20-30seconds after the watch is running. I’d like to know if the problems comes from my webpack config or from the module itself (why not ahah).

14

It generally happens to me (I think) when I git pull upstream master while webpack server is running. To correct the problem, I just stop and restart the server.

1 Like
15

Sorry I just saw this. I have put off trying to load editor scenes for now. My webpack is set up to recompile on file changes.

1 Like
16

In my case, the weird behavior happens also if I’m not in a git repository
I really don’t understand what is happening :frowning:

17

Doing a gulp typescript or anything else that builds libraries while webpack is running can lead to this weird behaviour too, I think. But if you are doing nothing in the git repository and the problem suddenly shows up, I really don’t know…