在 THREE.js 中取消将对象加载到场景中

Question

所以我有一个 THREE.js 场景，我必须在其中取消将文件上传到场景。在我的页面中，我可以上传多个可能的文件，但我正在尝试进行设置，以便您一次只能上传一个文件以供在场景中查看。我正在使用 angular 来实现我的三个 js 场景，并且 canvas 本质上是一个工厂，因为我一次只想要 canvas 的一个实例。这是那个工厂的基本代码（对于这个特定的问题）顺便说一句，我正在使用 Angular，这就是开头 app.factory 和注入 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;
}]);

所以基本上它的工作原理是有多个可能的 canvases（取决于 canvas_selector），但只有一个活动的 canvas，因为旧的 canvas/scene/renderer/etc... 每次启动新模型时都会被销毁（因此 self.destroy_old 在 init 函数的开头）。

如果我在创建新场景之前等待对象加载，它会按预期工作，因此当启动新场景时，只有一个部分出现在场景中。但是，如果启动一个场景，然后启动另一个场景，而旧场景仍在加载该部分，则新场景将同时加载新旧部分。尽管在创建新的之前将加载器、加载器管理器和部件设置为空，但仍会发生这种情况。

那么有人知道如何阻止加载程序在加载文件时将文件加载到场景中吗？

我在文档中找不到任何似乎是加载程序或 STLLoader（继承加载程序）的本机函数。

Answer 1

好的，所以我不得不对 three.js 和 STLLoader 文件进行一些（非常简单的）更改，我从这里 cancel download jsonLoader & ImageUtils.loadTexture 得到了灵感。无论如何，这是我自己的解决方案：

在 three.js 中，我必须对 THREE.XHRLoader 进行以下更改：

THREE.XHRLoader.prototype = {

    constructor: THREE.XHRLoader,

    load: function ( url, onLoad, onProgress, onError ) {

        ...

        var request = new XMLHttpRequest();

        ...

        scope.manager.itemStart( url );

        return request; // I ADDED THIS

    },
    ...

};

然后在 STLLoader.js 我补充说：

THREE.STLLoader.prototype = {

constructor: THREE.STLLoader,

load: function ( url, onLoad, onProgress, onError ) {

    var scope = this;

    var loader = new THREE.XHRLoader( scope.manager );
    loader.setCrossOrigin( this.crossOrigin );
    loader.setResponseType('arraybuffer');

    // Here I added request to equal loader since i made load return the original xmlhttprequest
    var request = loader.load( url, function ( text ) {

        onLoad( scope.parse( text ) );

    }, onProgress, onError );

    // here I return the request further back to my own application
    return request;

},

最后在我自己的代码中：

var modelViewer = {
    request: {},
    ...
}

modelViewer.destroy_old = function(canvas_selector){
    if (!$.isEmptyObject(this.request)){
        this.request.abort();
    }
    ...
}

modelViewer.init = function(part, canvas_selector){
    ...
    function loadModel(url){
        ...
        self.request = self.loader.load(url, function(geometry){
        ...
        }
    }
}

Answer 2

现在只是为了更新任何人，拉取请求已合并，您实际上可以从 onprogress 回调中取消。

var loader = new THREE.STLLoader();

loader.load('test.stl', function ( geometry ) {
    //stuff here
}, function(url) {
    //logic here
    url.currentTarget.abort()
}) ;

在 THREE.js 中取消将对象加载到场景中

canceling loading an object into a scene in THREE.js

javascript

three.js

angularjs