所以我有一个 THREE.js 场景,我必须取消将文件上传到场景。在我的页面中,我可以上传多个可能的文件,但我正在尝试将其设置为一次只能上传一个文件以便在场景中查看。我使用 Angular 来实现我的三个 js 场景和 Canvas ,本质上是一个工厂,因为我一次只需要一个 Canvas 实例。这是该工厂的基本代码(对于这个特定问题)顺便说一句,我正在使用 Angular,这就是开头的 app.factory 和注入(inject) PartLibrary 的原因,但这不相关。您需要知道的是 PartLibrary.load_part_STL() 只是一个函数,它进行 ajax 调用以获取要加载的 STL 文件的 url::
app.factory('ModelViewer', ['PartLibrary', function(QuoteLibrary){
var modelViewer = {
model_material: {},
part_model: {},
part: {},
scene: {},
camera: {},
renderer: {},
loader: {},
manager: {},
id: {}
};
modelViewer.destroy_old = function(canvas_selector){
cancelAnimationFrame(this.id);
this.scene = null;
this.renderer = null;
this.camera = null;
this.part_edges = null;
this.part_model = null;
this.loader = null;
this.manager = null;
$('canvas').remove();
}
modelViewer.init = function(part, canvas_selector){
var self = this;
// distroy any old three js canvases
self.destroy_old(canvas_selector);
self.part = part;
self.initiated = true;
var container = $(canvas_selector)[0];
self.scene = new THREE.Scene();
self.camera = new THREE.PerspectiveCamera( 45, $(canvas_selector).width()/$(canvas_selector).height(), 1, 20000 );
self.scene.add( new THREE.AmbientLight( 0x4F4F4F ) );
self.renderer = new THREE.WebGLRenderer( { antialias: true } );
container.appendChild( self.renderer.domElement );
PartLibrary.load_part_stl(part.id)
.success(function(url){
loadModel(url, self);
})
.error(function(){
console.log("Error loading STL file for 3D view");
});
function loadModel(url){
self.manager = new THREE.LoadingManager();
self.loader = new THREE.STLLoader(self.manager);
self.manager.onLoad = function(item, loaded, total){
$('.model-loading').hide();
}
self.loader.load(url, function(geometry){
self.model_material = new THREE.MeshPhongMaterial();
self.part_model = new THREE.Mesh( geometry, self.model_material );
self.scene.add( self.part_model );
});
}
function animate() {
self.id = requestAnimationFrame( animate );
render();
}
function render() {
// var timer = Date.now() * 0.0005;
self.renderer.render( self.scene, self.camera );
}
animate();
}
return modelViewer;
}]);
所以基本上它的工作原理是有多个可能的 Canvas (取决于canvas_selector),但只有一个事件 Canvas ,因为旧的 Canvas /场景/渲染器/等......每次启动新模型时都会被销毁(因此 self.destroy_old 位于 init 函数的开头)。
如果我在创建新场景之前等待对象加载,它会按预期工作,因此当启动新场景时,场景中只会出现一部分。但是,如果启动一个场景,然后在旧场景仍在加载该部分时启动另一个场景,则新场景将同时加载到新部分和旧部分中。尽管在创建新加载器、加载器管理器和部件之前将加载器、加载器管理器和部件设置为空,但仍然会发生这种情况。
那么有谁知道如何阻止加载器在加载文件时将其加载到场景中?
我在文档中找不到任何似乎是加载程序或 STLLoader(继承加载程序) native 的函数。
最佳答案
现在更新一下,拉取请求已合并,您实际上可以从 onprogress 回调中取消。
var loader = new THREE.STLLoader();
loader.load('test.stl', function ( geometry ) {
//stuff here
}, function(url) {
//logic here
url.currentTarget.abort()
}) ;
关于javascript - 取消将对象加载到 THREE.js 中的场景中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30584362/