Three.js-分析二进制STL-RangeError:越界访问

Question

我的目标是从我的(非公共(Laravel 8存储文件夹中加载带有三个.js的私有stl。

当然，这在STLLoader.js的.load函数中是不可能的，比如

const loader = new THREE.STLLoader();
const material = new THREE.MeshPhongMaterial({ color: 0x888888, specular: 0x111111, shininess: 2 });
loader.load( '../storage/app/private/file.stl', function ( geometry ) {
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
});

因为文件路径必须指向web根文件夹之外的专用存储，因此它无法工作。

我目前解决这个问题的方法是向某个STLController发出ajax post请求，在那里我使用get方法从Laravel检索文件内容，以这种方式获取stl文件内容：

return Storage::get('private/file.stl');

像这样，我现在可以将响应数据与STLLoader.js中的.parse函数一起使用，将其与three.js.一起使用

const loader = new THREE.STLLoader();
const material = new THREE.MeshPhongMaterial({ color: 0x888888, specular: 0x111111, shininess: 2 });
$.ajax({
type:'POST',
url: "get_stl_file_contents",
success: function(data) {
geometry = loader.parse(data);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
},
});

如果STL文件是ascii格式，这很好，但如果它是二进制格式，我总是收到相同的错误消息：

[ERROR]RangeError：越界访问-(getFloat32(

我要么需要一种方法将响应数据从binari转换为ascii以像现在这样使用它，要么我需要另一种方法从原始二进制文件内容加载/解析three.js的stl。

谢谢你的帮助！🤗

Answer 1

我的问题的一个解决方案：

只需创建一个特定的web路由来控制谁可以访问哪个文件，并像往常一样使用three.js STLLoader((。类似这样的东西：

web.php

Route::middleware('auth:sanctum', 'verified')->group(function () {
[...]
Route::get('data/users/{user_id}/{filename}', [FileController::class, 'get_file']);
});

FileController.php

public function get_file($user_id, $filename): IlluminateHttpResponse
{
if (Gate::allows('access-stl') || Auth::id() == $user_id) {
return $this->return_user_file($user_id, $filename);
} else {
abort(403);
}
}
public function return_user_file($user_id, $filename): IlluminateHttpResponse
{
$path = storage_path('app/data/users/'.$user_id.'/'.$filename);
try {
$file = File::get($path);
$type = File::mimeType($path);
$response = Response::make($file);
$response->header('Content-Type', $type);
return $response;
} catch (FileNotFoundException) {
abort(404);
}
}

script.js

const scene = new THREE.Scene();
const loader = new THREE.STLLoader();
const material = new THREE.MeshPhongMaterial({ color: 0x888888, specular: 0x111111, shininess: 2 });
loader.load('data/users/1/file.stl', function (geometry) {
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});