Babylon JS - 来自本地文件的 SceneLoader

Question

新的 Babylon JS 用户，希望快速了解这个出色的框架。玩过 Sandbox 和在线编辑器，使用标准组件（Box、Sphere 等）从头开始构建我自己的编码模型。我的问题涉及如何加载更复杂的自定义几何体。对 3D CAD 非常满意 - STL/OBJ 文件，从 Blender 导出了一些 .Babylon 格式，这些格式可以很好地导入 Babylon 的在线 Sandbox & Editors。但是，我似乎无法让 SceneLoader 从本地 C:/ 驱动器读取文件。代码摘录如下：

// Create new Babylon Scene
var scene = new BABYLON.Scene(engine);

// Change scene background color
scene.clearColor = new BABYLON.Color3(1, 1, 1);

// Create and positions a free camera
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 10, 0), scene);

 // Target the camera to scene origin
 camera.setTarget(BABYLON.Vector3.Zero());

// Attach camera to the canvas
camera.attachControl(canvas, true);

// Define built-in 'box' shape.
var box = BABYLON.Mesh.CreateBox("sphere1", 1, scene);

// Define 'ground' plane
var ground = BABYLON.Mesh.CreateGround("ground1", 100, 100, 100, scene);
            ground.position.y = 0;
//Load local .babylon file from root Dir
BABYLON.SceneLoader.Load("", "Test.babylon", engine, scene);

我的模型有一个带地平面的标准几何体。在 Babylon 中所有渲染效果都很好——直到我添加 SceneLoader 行。当我添加这个时，我卡在了 Babylon Loading 介绍初始屏幕（旋转 Babylon 徽标）上。如果我注释掉上面的最后一行代码，模型就可以很好地呈现盒子。已经看过关于这个的各种论坛页面并且破坏了我的大脑以至于被卡住例如：http://www.html5gamedevs.com/topic/20924-stlobj-file-loader/ & https://www.eternalcoding.com/?p=313 我相信 Google Chrome 可能出于安全考虑锁定了本地文件链接，已尝试运行ning 在 -Allow-Local-File-Access 模式下，仍然卡在加载页面上。我是否需要网络服务器（我不知道从哪里开始！）或者我可以在本地运行巴比伦场景吗？

Answer 1

所以我不是 100% 确定这个答案，但希望它能有所帮助。我按照这个 tutorial （跳到加载场景的部分）。一个问题绝对是跨源问题，另一个问题是如何调用 SceneLoader.Load 方法。

当我使用常规 Chrome 尝试教程中的代码时，我在 Web 控制台中看到了三个警告。关于 Test.babylon.manifest 的两个错误（使用您的示例文件命名）和一个关于 Test.babylon 的错误。您可以忽略那些关于清单 afaik 的内容。重要的是关于 Test.babylon 本身的错误。因此默认情况下不允许跨源请求并且不会加载 babylon 文件（如预期的那样）。

现在，当我关闭 Chrome 并在终端中通过运行 open -a "Google Chrome" --args --allow-file-access-from-files 重新打开它时（我在 OSX Yosemite），并且然后加载页面，对象加载正常。我仍然在 Web 控制台中看到两个关于清单的错误，但可以忽略它们。

注意 BABYLON.SceneLoader.Load 函数是如何被调用的。导入过程是异步的，最后一个参数看起来是对象成功加载后要执行的操作的回调函数，所以我认为您不能像在原始代码中那样只传递 scene 。查看 function docs.

Answer 2

好的 - porgress。我使用 SceneLoader.ImportMesh 实现了它，但我必须使用 Python (v3) 设置一个简单的 HTTP 服务器。这 link 帮了大忙：http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python 所以你运行来自 Babylon index.html 所在目录的 Python HTTP 服务器，它运行就好像 HTTP 绕过了 [=20 中的本地文件访问限制=]. 所以我的问题几乎得到了回答。我现在将 Test.Baylon 文件中的网格几何体放入我的主场景中。使用 SceneLoader.Load 仍然有问题，因为新场景取代了我的原始场景并且原始几何体消失了。大卫 - 我认为你对所需要的功能是正确的，尽管我认为这是可选的。正如我所说，教程示例创建了一个 newScene 并在函数内呈现，在我的情况下，我不知道在函数中做什么......也许只是 'return'?

Answer 3

OP 提出的第一个问题：浏览器未从文件系统加载网格。

解决方案： 使用网络服务器，例如 Simple HTTP Server (Python)。根据您的 Python 版本，执行此操作的方法略有不同。要检查 Windows 上的 Python 版本，请打开命令提示符并键入 python --version。记住版本号以备后用:)

使用命令提示符 Python 设置简单的 Web 服务器：

在文件资源管理器中导航到包含您的 index.html 文件的目录
左键单击路径框内的空白 space（上面写着 This PC > Documents，等等...）
键入cmd，它将在当前目录中打开命令提示符
输入适当的命令...

python -m SimpleHTTPServer [optional port number] if you are using Python 2

python -m http.server [optional port number] if you are using Python 3

我通常会省略端口号，直接输入 python -m http.server.
现在打开您喜欢的浏览器并在地址栏中输入 localhost:8000。（8000 是默认端口号。 如果您指定了一个端口，请使用您指定的端口号。）如果代码没有错误，它应该会加载您的网格。

OP 提出的第二个问题：SceneLoader.Load 方法覆盖了之前加载的网格。

解法：

如果您只需要导入几个网格，请使用 BABYLON.SceneLoader.Append(...) or BABYLON.SceneLoader.ImportMesh(...)。但是这种方式对于资产多管理起来不方便
或者，使用 BABYLON.AssetsManager(...). Since Babylon.js loads models in asynchronously, the asset manager allows ease of use through callback functions. In other words, you can find your assets by name by using scene.getMeshByName("yourMesh") if you type inside the callback function. Here is a simple demo。

我知道这个问题已经有几年了，但如果有人对此仍有疑问，我希望这个答案能有所帮助。

Babylon JS - 来自本地文件的 SceneLoader

Babylon JS - SceneLoader from Local File

javascript

babylonjs