如何使用 JavaScript/FileApi/XHR 加载从搅拌机导出的 *.babylon?
How to load *.babylon exported from blender using JavaScript/FileApi/XHR?
我非常擅长使用 .babylon 文件格式。
为 Blender 3D 编辑器开发的导出器工作完美,如果使用下一个代码加载导出的模型:
// won't write the full code
// because it was fetched from the playground and it's very standard and works
BABYLON.SceneLoader.Load("", "fileName.babylon", engine, function (newScene) {
...
效果很好,浏览器中的 WebGL 渲染器显示了我的模型。
但是,如果我不想将模型加载为必须保存在 HTTP-server 的 public 文件夹中的静态文件怎么办(IIS、Apache、lighttpd、nginx等..).
例如我想从用户端加载一个 .babylon 文件,或者在我的后端保护对 .babylon 文件的访问。
好吧,让我们看看情况,如果我在我的 web-application 中提供某种 Uploader(使用来自浏览器的文件 API),来自哪个用户将能够从他们的 PC 或其他设备加载 3D 模型。
我正在尝试以这种方式加载模型:
文件上传(input-file 的 change
事件)运行良好:
function handleFiles( event ) {
var uploader = event.srcElement || event.currentTarget;
var files = uploader.files;
var reader = new FileReader();
reader.onload = function( event ) {
var data = JSON.parse( event.target.result );
loadCustomMesh( data );
};
// passing only single mesh because of testing purpose
reader.readAsText( files[ 0 ] );
}
处理几何体并添加到场景:
function loadCustomMesh( data ) {
var mesh = new BABYLON.Mesh( Math.random().toString(), scene );
mesh.setVerticesData( BABYLON.VertexBuffer.PositionKind, data.meshes[ 0 ].positions, true );
mesh.setVerticesData( BABYLON.VertexBuffer.NormalKind, data.meshes[ 0 ].normals, true );
mesh.setIndices( data.meshes[ 0 ].indices );
mesh.position = new BABYLON.Vector3( 0, 0, 0 );
...
效果很好!但!!!没有材料...
我从上传的数据中发现多材料在这里:
但是如果使用下一个代码:
mesh.material = data.multiMaterials[ 0 ];
这对这个样本完全有效,它抛出下一个错误:
Uncaught TypeError: t.needAlphaBlending is not a function
我什至不知道下一步该做什么,有什么想法吗?
这里问题解决:
function handleFiles( event ) {
var uploader = event.srcElement || event.currentTarget;
var files = uploader.files;
var reader = new FileReader();
reader.onload = function( event ) {
var result = event.target.result;
BABYLON.SceneLoader.ImportMesh(
null,
event.target.result,
'',
scene,
function( newMeshes, particleSystems, skeletons ) {
var mesh = newMeshes[ 0 ];
mesh.position = new BABYLON.Vector3( 0, 0, 0 );
}
);
};
reader.readAsDataURL( files[ 0 ] );
}
我非常擅长使用 .babylon 文件格式。 为 Blender 3D 编辑器开发的导出器工作完美,如果使用下一个代码加载导出的模型:
// won't write the full code
// because it was fetched from the playground and it's very standard and works
BABYLON.SceneLoader.Load("", "fileName.babylon", engine, function (newScene) {
...
效果很好,浏览器中的 WebGL 渲染器显示了我的模型。
但是,如果我不想将模型加载为必须保存在 HTTP-server 的 public 文件夹中的静态文件怎么办(IIS、Apache、lighttpd、nginx等..).
例如我想从用户端加载一个 .babylon 文件,或者在我的后端保护对 .babylon 文件的访问。
好吧,让我们看看情况,如果我在我的 web-application 中提供某种 Uploader(使用来自浏览器的文件 API),来自哪个用户将能够从他们的 PC 或其他设备加载 3D 模型。
我正在尝试以这种方式加载模型:
文件上传(input-file 的 change
事件)运行良好:
function handleFiles( event ) {
var uploader = event.srcElement || event.currentTarget;
var files = uploader.files;
var reader = new FileReader();
reader.onload = function( event ) {
var data = JSON.parse( event.target.result );
loadCustomMesh( data );
};
// passing only single mesh because of testing purpose
reader.readAsText( files[ 0 ] );
}
处理几何体并添加到场景:
function loadCustomMesh( data ) {
var mesh = new BABYLON.Mesh( Math.random().toString(), scene );
mesh.setVerticesData( BABYLON.VertexBuffer.PositionKind, data.meshes[ 0 ].positions, true );
mesh.setVerticesData( BABYLON.VertexBuffer.NormalKind, data.meshes[ 0 ].normals, true );
mesh.setIndices( data.meshes[ 0 ].indices );
mesh.position = new BABYLON.Vector3( 0, 0, 0 );
...
效果很好!但!!!没有材料...
我从上传的数据中发现多材料在这里:
但是如果使用下一个代码:
mesh.material = data.multiMaterials[ 0 ];
这对这个样本完全有效,它抛出下一个错误:
Uncaught TypeError: t.needAlphaBlending is not a function
我什至不知道下一步该做什么,有什么想法吗?
这里问题解决:
function handleFiles( event ) {
var uploader = event.srcElement || event.currentTarget;
var files = uploader.files;
var reader = new FileReader();
reader.onload = function( event ) {
var result = event.target.result;
BABYLON.SceneLoader.ImportMesh(
null,
event.target.result,
'',
scene,
function( newMeshes, particleSystems, skeletons ) {
var mesh = newMeshes[ 0 ];
mesh.position = new BABYLON.Vector3( 0, 0, 0 );
}
);
};
reader.readAsDataURL( files[ 0 ] );
}