My viewer worked fine a minute ago and now I get a “Uncaught ReferenceError: BABYLON is not defined”
I know what this means, but what is going on exactly? Is the cdn not loading correctly?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>Babylon Template</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
{{-- <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script> --}}
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
<script>
var vehicle = {!! json_encode($vehicle->toArray(), JSON_HEX_TAG) !!};
var path = {!! json_encode($path, JSON_HEX_TAG) !!};
var file = {!! json_encode($file, JSON_HEX_TAG) !!};
var viewerPath = {!! json_encode($viewerPath, JSON_HEX_TAG) !!};
//console.log(vehicle);
//console.log("PATH" + path);
//console.log("FILE" + file);
//console.log("VIEWER PATH" + viewerPath)
var canvas = document.getElementById("renderCanvas"); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
engine.enableOfflineSupport = false;
/******* Add the create scene function ******/
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.Black;
//var material = new BABYLON.StandardMaterial("kosh", scene);
//Adding a light
//var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 10), scene);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
//Adding an Arc Rotate Camera
var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, -Math.PI / 2, 50, BABYLON.Vector3.Zero(), scene);
camera.lowerRadiusLimit = 22;
camera.upperRadiusLimit = camera.lowerRadiusLimit * 4;
camera.attachControl(canvas, true);
BABYLON.SceneLoader.OnPluginActivatedObservable.add(function (loader) {
if (loader.name === "gltf") {
loader.animationStartMode = BABYLON.GLTFLoaderAnimationStartMode.ALL;
}
});
//Skybox example from https://www.babylonjs-playground.com/#TC4DI8#0
var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(viewerPath + "/TropicalSunnyDay", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
BABYLON.SceneLoader.LoadAssetContainer(path, file, scene, function (container) {
var meshes = container.meshes;
var materials = container.materials;
scene.createDefaultEnvironment();
scene.createDefaultSkybox();
camera.target = meshes[0];
// Adds all elements to the scene
container.addAllToScene();
});
return scene;
}
/******* End of the create scene function ******/
var scene = createScene(); //Call the createScene function
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>