Cube in Babylon.js

Babylon.js Hispano

by realhunts

HTML

<canvas id="main"></canvas>
 <!-- Babylon.js -->
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
        <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js">
        </script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

         <!-- Dependencies -->
         <script src="https://preview.babylonjs.com/ammo.js"></script>
         <script src="https://preview.babylonjs.com/earcut.min.js"></script>
         <script src="https://preview.babylonjs.com/recast.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/oimo/1.0.9/oimo.min.js"></script>
         <script src="https://preview.babylonjs.com/libktx.js"></script>
         <script src="https://threejs.org/build/three.min.js"></script>
         <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>

CSS

html, body, canvas{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var canvas = document.getElementById("main");
var engine = new BABYLON.Engine(canvas);
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.6,0.6,0.6);

function renderLoop(){
 box.rotation.x += 0.01;
 box.rotation.y += 0.01;
 scene.render();
}
engine.runRenderLoop(renderLoop);

var loader = new THREE.GLTFLoader();
window.onload = ()=>{
console.log("loading...")
var url = "https://cdn.glitch.com/6b59148a-de9f-4829-98fe-67e50d7ee457%2Fscene%20(2).gltf?v=1591746225386"
  			loader.load(url, (gltf) => {
    
	//scene.add(geo)
 // geo.geometry.scale(xdim, ydim, zdim)

        var object;
        if ( gltf.scene !== undefined ) {
            object = gltf.scene; // default scene
        } else if ( gltf.scenes.length > 0 ) {
            object = gltf.scenes[0]; // other scene
        }
        //scene.add(object)
 				gltf.scene.traverse(function(child) {
          //  scene.add(child)  
        if(child.geometry != undefined){   
        var conv = new THREE.Geometry().fromBufferGeometry(child.geometry)
          //console.log(child.geometry.attributes.position.array)
          var pos = child.geometry.attributes.position.array
          var ind = child.geometry.index.array
          //console.log(ind)
          //babylonjs construct
          var customMesh = new BABYLON.Mesh("custom", scene);
	
	//Set arrays for positions and indices
	var positions =  pos//[-5, 2, -3, -7, -2, -3, -3, -2, -3, 5, 2, 3, 7, -2, 3, 3, -2, 3];
	var indices = ind//[0, 1, 2, 3, 4, 5];
	
  //console.log(positions)
	//Create a vertexData object
	var vertexData = new BABYLON.VertexData();

	//Assign positions and indices to vertexData
  var normals = []
	BABYLON.VertexData.ComputeNormals(positions, indices, normals);

vertexData.positions = positions;
vertexData.indices = indices;
vertexData.normals = normals; //Assignment of normal to vertexData added

	//Apply vertexData to custom mesh
	vertexData.applyToMesh(customMesh);
  customMesh.scaling.set(5, 5, 5)
 ...