-So I use Visual Code to code.
-I use Xampp to create a local server.
-Everything works perfectly when loading Meshes.
-Lighting works.
-Camera works.
-Images and .babylon files are in the same folder of the HTML.
My only problem, I cannot seem to get any image to be texture of ANY imported or loaded Mesh. I get it to work for spheres, boxes but not MESHES.
I have been stuck on this issue for almost a week. Since this is my first time using BabylonJS, I tried multiple tutorials with different functions for importing a Mesh and then texturing it.
Here are some tutorial I followed:
1.) https://www.babylonjs-playground.com/#R6F9BC#6
2.) Adding Basic Mesh, Materials and Textures in Babylon.JS - YouTube
And then some from the docs and some from forum codes.
(I cannot do the texture in blender and then load to BabylonJS, my designer did not do it that way).
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> BabylonJS Demo </title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/babylon.max.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.getContext('webgl');
//creating an engine in Babylon
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
//This is the background.
scene.clearColor = new BABYLON.Color3.White();
//var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
//var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 0), scene);
//var light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(10,10,10), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 2, 2, 2, BABYLON.Vector3.Zero(), scene);
camera.wheelPrecision = 200;
camera.minZ = 0.005;
camera.attachControl(canvas, false);
//var cube = new BABYLON.Mesh.CreateBox("cube", 0.1);
var mesh;
var texture;
var skullMaterial = new BABYLON.StandardMaterial("", scene);
//skullMaterial.metallic = 0.1;
//skullMaterial.roughness = 0.2;
var assetsManager = new BABYLON.AssetsManager(scene);
assetsManager.useDefaultLoadingScreen = false;
var meshTask = assetsManager.addMeshTask("", "", "", "alduin-dragon.babylon");
meshTask.onSuccess = function (task) {
mesh = task.loadedMeshes[0];
mesh.position = new BABYLON.Vector3.Zero;
mesh.scalingDeterminant = 0.01;
mesh.material = skullMaterial;
text1.text += ", mesh";
updateTexture();
};
var textureTask = assetsManager.addTextureTask("image task", "external-contentduckduckgocom.jpg");
textureTask.onSuccess = function (task) {
texture = task.texture;
text1.text += ", texture";
updateTexture();
};
function updateTexture() {
if (mesh && texture) {
mesh.material.albedoTexture = texture;
}
};
assetsManager.load();
return scene;
};
var scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
</script>
</body>
</html>