Babylon JS - 本地文件中的SceneLoader

Question

新的Babylon JS用户，希望通过这个梦幻般的框架加快速度。玩过Sandbox和在线编辑器，使用标准组件 - Box，Sphere等从头开始编写我自己的编码模型。我的问题涉及如何加载更复杂的自定义几何体。对3D CAD-STL / OBJ文件非常熟悉，从Blender到.Babylon格式的一些出口进入了巴比伦的在线沙盒和编辑器。但是，我似乎无法让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);

我的模型有一个带地平面几何的标准框。所有在巴比伦渲染都很棒 - 直到我添加SceneLoader线。当我添加这个时，我被卡在巴比伦加载介绍闪屏（旋转巴比伦标志）上。如果我注释掉上面的代码的最后一行代码，那么使用该框就可以了。看过各种各样的论坛页面并破坏我的大脑以至于被卡住了：例如：http://www.html5gamedevs.com/topic/20924-stlobj-file-loader/和https://www.eternalcoding.com/?p=313我相信谷歌Chrome可能会锁定本地文件链接以确保安全性，尝试在-Allow-Local-File-Access中运行模式，仍然停留在加载页面。我需要一个Web服务器（我不知道从哪里开始！）或者我可以在本地运行Babylon场景吗？

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服务器。这个链接有很多帮助：http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python所以你从Babylon index.html所在的目录运行Python HTTP服务器，它就像HTTP绕过Chrome中的本地文件访问限制一样运行。所以我的问题几乎都回答了。我现在将Test.Baylon文件中的网格几何体放入我的主场景中。仍然有问题使用SceneLoader.Load作为新场景进入取代我的原始场景并且原始几何消失。大卫 - 我认为你对所需的功能是正确的，尽管我认为这是可选的。正如我所说，Tutorial示例创建了一个newScene并在函数内呈现，在我的情况下我不知道在函数中做什么...也许只是'返回'？

Answer 3

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

解决方案：使用简单HTTP服务器（Python）等Web服务器。根据您的Python版本，执行此操作的方式略有不同。要在Windows上检查Python版本，请打开命令提示符并键入python --version。记住以后的版本号:)

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

• 在文件资源管理器中使用index.html文件导航到该目录
• 左键单击路径框内的空白区域（其中显示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(...)或BABYLON.SceneLoader.ImportMesh(...)。但是，这种方法不便于管理许多资产。
• 或者，使用BABYLON.AssetsManager(...)。由于Babylon.js以异步方式加载模型，因此资产管理器允许通过回调函数轻松使用。换句话说，如果在回调函数内输入，则可以使用scene.getMeshByName("yourMesh")按名称查找资产。这是一个simple demo。

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