three.js 异步加载 模型数据清除不完整

Question

场景：
参照https://threejs.org/editor/ 例子写的一个3D Demo
vue app create生命周期的时候就初始化场景scene
比如说我有多个场景，编辑场景A的时候，根据后台接口数据在场景scene中添加异步模型，
编辑B场景的时候，根据后台数据在场景scene中添加相应的模型数据。

现在遇到的问题是，当A中数据没有完全加载完成，快速切换到B场景，导致A场景的有些模型数据存留到B场景中，目前测出来是因为异步加载导致scene数据清除不完整，在B场景中有对scene数据进行清除。

能想到的解决方案是终止异步操作，但是不知道如何去实现。比较low的解法是做一个延时去遍历scene，如果有上个场景遗留的数据，做清除。

异步加载模型使用的是GLTFLoader.load ，并不是ajax，axios

有谁有比较好的建议？

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 1

这要看你是用什么方式加载的数据，如果是jq可以使用($ajax()的返回值).abort()来取消请求，axios可以使用CancelToken取消。而如果使用的是three本身的load，这要看情况，比如(new FileLoader()).load()加载数据是有返回request请求的，这时候可以使用request.abort()

除了取消请求，还可以在数据请求成功后，判断当前场景是否是加载数据时的场景，是的话在渲染，这需要为场景定义不同场景名称

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

原生 XMLHttpRequest 是 abort()。
axios 大概是叫 cancelToken 这样。

也可以考虑加锁，你肯定是数据回来会执行一个回调，这个时候存一个变量，只执行最新的。

publicLocked = null
function (){
  var locked = Date.now() + Math.random()
  publicLocked = locked
  xhr.send()
  xhr.onload = function(){
    if(publicLocked == locked){}
  }
}

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

最简单粗暴的一个就是你在 GLTFLoader.load 的时候做一个loading效果，然后就不能操作切换场景了。

如果不想这样的话，考虑在 loaded 时判断一下当前场景，如果不是 场景A 就不添加进去，存入缓存中，回到 场景A 时再把队列中的新元素 添加进入场景

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。