Thanks! It is the best solution for me because I do not want to use “5.0.0-alpha”; I want to use the stable 4.2.0 version of Babylon.js. But I deleted the 4.3.5 version of TypeScript before installing the 4.0.2 version of TypeScript like this:
npm uninstall typescript -g
Maybe it is unnecessary to delete it before installing the old one but okay.
Just simple example with GLB loading and Skybox in Playground: Plunker - Load GLB in TypeScript and Babylon.js
Source Code: GitHub - 8Observer8/load-glb-babylonjs-ts
tsconfig.debug.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "AMD",
"sourceMap": true,
"types": [
"babylonjs",
"babylonjs-loaders",
"babylonjs-gltf2interface",
"requirejs"
],
"lib": [
"DOM",
"ES2015"
]
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"outDir": "../public/js"
},
"include": [
"../src/client/**/*.ts"
]
}
package.json
{
"name": "load-glb-babylonjs-ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"debug": "tsc -p tsconfigs/tsconfig.debug.json",
"compile": "tsc -p tsconfigs/tsconfig.release.json",
"bundle": "browserify public/js/main.js -o public/js/bundle.js",
"minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
"release": "npm run compile && npm run bundle && npm run minify"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babylonjs": "^4.2.0",
"babylonjs-loaders": "^4.2.0",
"requirejs": "^2.3.6"
},
"devDependencies": {
"@types/requirejs": "^2.1.32"
}
}
requireConfig.ts
requirejs.config({
baseUrl: "js",
paths: {
"babylonjs": "https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon",
"babylonjs-loaders": "https://cdn.jsdelivr.net/npm/babylonjs-loaders@4.2.0/babylonjs.loaders.min"
}
});
requirejs(["main"], () => { });
main.ts
import * as BABYLON from "babylonjs";
import "babylonjs-loaders";
function createScene(): BABYLON.Scene
{
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("RotateCamera", 100 * Math.PI / 180, 70 * Math.PI / 180, 15,
new BABYLON.Vector3(0, 0, 0), scene);
camera.wheelPrecision = 100;
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
const assetPath = "https://dl.dropboxusercontent.com/s/735ww173uc2t6bh/";
BABYLON.SceneLoader.Append(assetPath, "gate.glb", scene, (scene) => { });
const skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, scene);
skybox.infiniteDistance = true;
const skyboxMaterial = new BABYLON.StandardMaterial("skyboxMat", scene);
skyboxMaterial.backFaceCulling = false;
const files = [
"https://dl.dropboxusercontent.com/s/d6pb1vco30tb1qd/skybox_px.jpg",
"https://dl.dropboxusercontent.com/s/j8r319homxctq46/skybox_py.jpg",
"https://dl.dropboxusercontent.com/s/owtkos3hjayv819/skybox_pz.jpg",
"https://dl.dropboxusercontent.com/s/fn49xqtrz18h6vn/skybox_nx.jpg",
"https://dl.dropboxusercontent.com/s/jdtd2cgpe13930o/skybox_ny.jpg",
"https://dl.dropboxusercontent.com/s/shin4itwifrypl5/skybox_nz.jpg",
];
skyboxMaterial.reflectionTexture = BABYLON.CubeTexture.CreateFromImages(files, scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
engine.runRenderLoop(
() =>
{
scene.render();
});
window.onresize =
() =>
{
engine.resize();
};
return scene;
}
function main()
{
createScene();
}
// Debug
main();
// Release
// window.onload = () => main();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello App</title>
<link rel="stylesheet" href="css/style.css">
<!-- Debug -->
<script data-main="js/requireConfig"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<!-- Release -->
<!-- <script src="js/bundle.min.js"></script> -->
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
</html>
style.css
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
touch-action: none;
width: 100%;
height: 100%;
}
