Question

我想使用已由用户上传的Babylon.js加载文件。我环顾四周，但只能找到加载巴比伦场景文件的例子。

有没有办法直接使用Babylon.js加载.obj和/或.stl文件，而无需将它们转换为.babylon文件？

感谢。

Answer 1

为了减少框架大小，Babylon.js不包含文件加载器。但你可以去那里使用我们的装载机之一：https://github.com/BabylonJS/Babylon.js/tree/master/loaders

Answer 2

您是否尝试过assetManager？它可以自动解决您的问题。简单来说，它只是一个数组，里面装满了加载数据，加载屏幕更加丰富，更多信息来自：https://github.com/BabylonJS/Babylon.js/wiki/Using-AssetsManager

<!DOCTYPE html>
<html><head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Babylon.js sample code assetsManager loading</title>
        <!-- Babylon.js -->
        <script src="index_subory/hand.js"></script>
        <script src="index_subory/cannon.js"></script>
        <script src="index_subory/oimo.js"></script>
        <script src="index_subory/babylon.2.0.debug.js"></script>
        <script src="index_subory/jquery.min.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <div style="background-color:grey;color:white;font-weight:bold;margin-left:auto;margin-right:auto;text-align:center;">Pre prehliadače s WebGL: WebGL Javascript pokus v babylon.js - ovládaj šípkami na klávesnici a ťahaním myškou:<br><div style="background-color:grey;color:white;font-weight:bold;">The Pulse [Ak nevidíte video, chyba je v prehliadači, ľutujeme, možno novší to zvládne ;-) ] </div></div>
    <canvas height="782" width="1440" id="renderCanvas"></canvas>
    <script>
        var canvass = $('#renderCanvas');   
        // check to see if we can do webgl
// ALERT FOR JQUERY PEEPS: canvas is a jquery obj - access the dom obj at canvas[0]
var dcanvas = canvass[0];
expmt = false;
if ("WebGLRenderingContext" in window) {
    //alert("browser at least knows what webgl is.");
}
// some browsers don't have a .getContext for canvas...
try { 
    gl = dcanvas.getContext("webgl"); 
    }catch (x){ 
        gl = null; 
        }
if (gl == null) {
    try { 
        gl = dcanvas.getContext("experimental-webgl"); 
        }catch (x){ 
            gl = null; 
            }
if (gl == null) { 
    //console.log('but can\'t speak it'); 
    }else { 
        expmt = true; //alert('webgl experimentally.'); 
        }
} else {
    //alert('webgl natively');
}

if (gl || expmt) {
//alert("loading webgl content.");
} else {
alert("CHYBA: Váš prehliadač nepodporuje WebGL, ľutujeme. (ERROR: Your browser does not support WebGL, sorry.)");
canvas.remove();
}


         if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);
        var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 1.0, 1.0, scene);
        var createScene = function () {


            // setup environment
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10,80), scene);
            var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);
            var light2 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, -80), scene);

            var simpleMaterial = new BABYLON.StandardMaterial("texture2", scene);

            simpleMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
            sphere1.material = simpleMaterial;
            sphere1.position.x=-4;
            sphere1.position.z=-4;
            sphere1.position.y=4.5;

            camera.position.x = -9;
            camera.position.y = 4;
            camera.position.z = -10;
            camera.rotation.x = .28;
            camera.rotation.y = .707;
            camera.rotation.z = 0;
            camera.speed = .2;
            camera.attachControl(canvas);
            var ecran = BABYLON.Mesh.CreatePlane("impact", 8, scene); 
            ecran.rotation.z = 2*Math.PI;            
            // Video material
        var videoMat = new BABYLON.StandardMaterial("textVid", scene);
        videoMat.diffuseTexture = new BABYLON.VideoTexture("video", ["index_subory/v.ogv"], 256, scene, false);
        videoMat.backFaceCulling = false;
        ecran.material = videoMat;


            // Mirror

            //var mirror = BABYLON.Mesh.CreateBox("Mirror", 1.0, scene);
            var mirror = BABYLON.Mesh.CreateGround("gnd", 16, 16, 1, scene, true);
            // var mirror = BABYLON.Mesh.CreatePlane("Mirror", 5.0, scene);
            mirror.position = new BABYLON.Vector3(0, -0.5, 0);
            mirror.material = new BABYLON.StandardMaterial("mirror", scene);
            mirror.material.backFaceCulling = false;
            // mirror.material.diffuseColor = new BABYLON.Color3(0.0, 0, 0.1);
            mirror.material.reflectionTexture = new BABYLON.MirrorTexture("mirror", 512, scene, true);
            mirror.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -1.0);
            mirror.material.reflectionTexture.renderList = [ecran,sphere1];
            mirror.material.reflectionTexture.level = 1;
            //mirror.material.reflectionTexture.coordinatesMode = BABYLON.Texture.PROJECTION_MODE;

           return scene;
        }


        var scene = createScene();

    var assetsManager = new BABYLON.AssetsManager(scene);
    var binaryTask = assetsManager.addBinaryFileTask("binary task", "index_subory/v.ogv");
    //engine.displayLoadingUI();
    engine.loadingUIText = "Loading... (Načítavanie...)";
    assetsManager.onTaskSuccess = function (task) {
            // Do something with task.data.
            //engine.hideLoadingUI();
        };
    assetsManager.onTaskError = function (task) {
            // Do something with task.data.
            alert('Error with loading by assetsManager...');                
        };
    assetsManager.onFinish = function (task) {
    //engine.hideLoadingUI();   
        engine.runRenderLoop(function () {
        scene.render();
        sphere1.rotation.y+=0.05;
        });
    };

    assetsManager.load();
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
        }else{
            alert("Chyba: Nemôžem spustiť WebGL. (Error: Can't run WebGL.)");
        }
    </script>


</body></html>

这是我用于预加载视频的代码，带有很好的加载消息，然后呈现场景。

在Babylon.js中加载.obj和.stl

2 个答案: