JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.4.1/babylon.max.js"></script>
<canvas id="renderCanvas"></canvas>
CSS
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
JavaScript
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 0, 10), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, Math.PI/2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, false);
// This function I created for simulate low FPS
for (var i = 0; i < 1500; i++) {
var canvas2d = new BABYLON.ScreenSpaceCanvas2D(scene, {
id: "ScreenCanvas", backgroundRoundRadius: 10 });
var elipse = new BABYLON.Ellipse2D({ parent: canvas2d,
id: "spriteAimCentral",
x: 50,
y: i,
width: 50,
height: 50,
subdivisions: 8,
border: "#ff0000FF",
borderThickness: 1
});
}
var skeleton;
new BABYLON.SceneLoader.ImportMesh("", "", 'data:' + JSON.stringify(modelData), scene,
function (newMeshes, particleSystems, skeletonsTmp) {
mesh = newMeshes[0];
skeleton = skeletonsTmp[0];
scene.beginAnimation(skeleton, 0, 39, true, 1);
var bone;
for (var i = 0; i < skeleton.bones.length; i++) {
if (skeleton.bones[i].name == "Bone.003") {
bone = skeleton.bones[i];
}
}
var sphere = BABYLON.Mesh.CreateSphere("sphere", 8, 1, scene);
sphere.attachToBone(bone, mesh);
camera.parent = mesh;
camera.rotation.y = Math.PI / 2;
scene.registerBeforeRender(function(){
mesh.position.z += 2;
});
});
window.addEventListener("click",...