this_1._scene.beginDirectAnimation is not function

Questions
1

the problem code about babylonjs in the animationGroup.js file, the method is AnimationGroup.prototype.start.

 var _loop_1 = function (index) {
            var targetedAnimation = this_1._targetedAnimations[index];
            var animatable =this_1._scene.beginDirectAnimation(targetedAnimation.target, [targetedAnimation.animation], from !== undefined ? from : this_1._from, to !== undefined ? to : this_1._to, loop, speedRatio, undefined, undefined, isAdditive !== undefined ? isAdditive : this_1._isAdditive);
            animatable.onAnimationEnd = function () {
                _this.onAnimationEndObservable.notifyObservers(targetedAnimation);
                _this._checkAnimationGroupEnded(animatable);
            };
            _this._processLoop(animatable, targetedAnimation, index);
            _this._animatables.push(animatable);
            
        };

I have pasted all my codes below:

ts file

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";

import { SceneLoader } from "@babylonjs/core/Loading";
import "@babylonjs/loaders"
import "@babylonjs/core/Loading/Plugins/babylonFileLoader"
import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import "@babylonjs/core/Collisions/collisionCoordinator";
import { Color3 } from "@babylonjs/core/Maths/math.color";

const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new Engine(canvas, true);

    // Scene and Camera
    var scene = new Scene(engine);

    var camera1 = new ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 10, new Vector3(0, -5, 0), scene);
    scene.activeCamera = camera1;
    scene.activeCamera.attachControl(canvas, true);
    camera1.lowerRadiusLimit = 2;
    camera1.upperRadiusLimit = 10;
    camera1.wheelDeltaPercentage = 0.01;

    // Lights
    var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
    light.intensity = 0.6;
    light.specular = Color3.Black();

SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "HVGirl.glb", scene).then((result) => {
    var hero: any = result.meshes[0];       
        hero.scaling.scaleInPlace(1);
});

engine.runRenderLoop(() => {
    scene.render();
});

tsconfig.json

{
	"compilerOptions": {
        "module": "esnext",
		"target": "es5",
		"moduleResolution": "node",
		"strict": true,
		"noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "strictFunctionTypes": false,
        "skipLibCheck": true,
		"preserveConstEnums":true,
        "sourceMap": true,
        "rootDir": "src"
	}
}

package.json

{
  "name": "zha",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babylonjs/core": "^5.15.1",
    "@babylonjs/loaders": "^5.16.0",
    "@babylonjs/materials": "^5.15.1",
    "@types/earcut": "^2.1.1",
    "babylonjs-gui": "^5.16.0",
    "babylonjs-loaders": "^5.16.0",
    "babylonjs-viewer": "^5.16.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "earcut": "^2.2.4",
    "earcut-typescript": "^2.2.3",
    "html-webpack-plugin": "^5.5.0",
    "source-map-loader": "^4.0.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

webpac.config.js

const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

// App directory
const appDirectory = fs.realpathSync(process.cwd());

module.exports = {
    entry: path.resolve(appDirectory, "src/index.ts"),
    output: {
        filename: "js/babylonBundle.js",
        path: path.resolve("./dist/"),
    },
    devtool: "eval-source-map",
    mode:"development",
    devServer: {
        static: {
          directory: path.resolve(appDirectory, "public"),
        },
        compress: true,
        port: 9000,
    },
    resolve: {
        extensions: [".ts", ".js"],
        fallback: {
            fs: false,
            path: false, // require.resolve("path-browserify")
        },
    },
    module: {
        rules: [
            {
                test: /\.m?js/,
            },
            {
                test: /\.(js|mjs|jsx|ts|tsx)$/,
                loader: "source-map-loader",
                enforce: "pre",
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                // sideEffects: true
            },
            {
                test: /\.(png|jpg|gif|env|glb|gltf|stl)$/i,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            inject: true,
            template: path.resolve(appDirectory, "public/index.html"),
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, './public/'),
                    to: path.resolve(__dirname, './dist/public'),
                }
            ]
        })
    ],
};
2

here are sample code

demo.zip (4.4 MB)

by the way, I wanna make a ES6 demo by babylonjs.

3

cc @RaananW

4

You will need to add an import to animatable:

import "@babylonjs/core/Animations/animatable"

It is explained right here - Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

3 Likes
5

thanks

2 Likes