JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://pixijs.download/v4.8.2/pixi.min.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<canvas id="renderCanvas" touch-action="none" width='500px' height='500px'></canvas>
JavaScript
var canvas = document.getElementById("renderCanvas");
// babylon.js rendering
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
//var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
//sphere.position.y = 1;
// var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
function setVisibility(mesh, value) {
mesh.isVisible = value;
var children = mesh.getChildren();
for (var i = 0; i < children.length; i++) {
var child = children[i];
setVisibility(child, value);
}
}
BABYLON.SceneLoader.ImportMesh("", "https://dl.dropbox.com/s/atjf4sqdfh2d2pr/", "warrior.glb", scene, function (meshes) {
scene.createDefaultCameraOrLight(true, true, true);
scene.getMaterialByID("Body_part_2").opacityTexture =
new BABYLON.Texture("https://i.imgur.com/eKe0BLT.png", scene);
scene.getMaterialByID("Body_part_2").opacityTexture.uAng = 3.14159265358979;
scene.getMaterialByID("Body_part_2").opacityTexture.getAlphaFromRGB = true;
scene.animationGroups[0].stop();
scene.animationGroups[0]._from = 0;
scene.animationGroups[0]._to = 10
scene.animationGroups[0].start();
console.log(scene);
scene.getMaterialByID("Body_part_1").metallic = 1;
scene.getMaterialByID("Body_part_1").roughness = 0.6;
for(const mesh of scene.meshes) {
mesh.useVertexColors = false;
console.log(mesh.id);
}
//scene.getMeshByID("Warrior_body_primitive0").isVisible = false;
//scene.getMeshByID("Warrior_Belts_arms_legs").isVisible = false;
});
// pixi.js rendering
var pixiRenderer = new...