<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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://code.jquery.com/pep/0.4.1/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP
<script type=module>
import * as BABYLON from './node_modules/babylonjs/dist/preview release/es6.js'
var canvas = document.getElementById("renderCanvas"); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
/******* Add the create scene function ******/
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(.5, .5, .5);
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(10.253, 5.82251, -9.45717));
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var blueMat = new BABYLON.StandardMaterial("blue", scene);
blueMat.emissiveColor = new BABYLON.Color3(0, 0, 1);
var redMat = new BABYLON.StandardMaterial("red", scene);
redMat.emissiveColor = new BABYLON.Color3(1, 0, 0);
var body = BABYLON.MeshBuilder.CreateCylinder("body", { height: 0.75, diameterTop: 0.2, diameterBottom: 0.5, tessellation: 6, subdivisions: 1 }, scene);
var arm = BABYLON.MeshBuilder.CreateBox("arm", { height: 0.75, width: 0.3, depth: 0.1875 }, scene);
arm.position.x = 0.125;
var blueBlock = BABYLON.Mesh.MergeMeshes([body, arm], true);
blueBlock.position = new BABYLON.Vector3(1, 3, 4);
blueBlock.material = blueMat;
redBlock = blueBlock.clone("redBlock");
redBlock.material = redMat;
redBlock.position = new BABYLON.Vector3(4, 3, 4);
return scene;
};
/******* End of the create scene function ******/
var scene = createScene(); //Call the createScene function
engine.runRenderLoop(function () { // Register a render loop to repeatedly render the scene
scene.render();
});
window.addEventListener("resize", function () { // Watch for browser/canvas resize events
engine.resize();
});
</script>
</body>
</html>
Causes:
Uncaught TypeError: Cannot set property hasLODLevels of [object Object] which has only a getter
at Function.Tools.DeepCopy (es6.js:8437)
at new Mesh (es6.js:27563)
at Mesh.clone (es6.js:29032)
at createScene (play.html:68)
at play.html:77
Same code with a script src tag works fine.