three.js 场景编辑器源码解析（四）

最新推荐文章于 2025-10-15 17:54:16 发布

原创

最新推荐文章于 2025-10-15 17:54:16 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

本文探讨了在处理大量3D模型时，如何利用浏览器内置的IndexedDB数据库来提升编辑器性能。IndexedDB相比localStorage具备更好的大文件存储能力和事务支持，适合于存储复杂的3D模型数据。

场景中编辑的模型会很多，而且文件会很大，使用浏览器本身的数据库存放这些数据是一个好方法，相比于localstring，浏览器本身的数据库支持大文件存储，支持事务，用起来更合适，编辑器使用了浏览器自带的indexDB数据库，代码如下：

//存储类（序列化类），使用的是浏览器数据库，这个数据库是否会拖慢编辑器的速度
var Storage = function () {

	//浏览器本身的数据库
	var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

	//如果数据库不存在
	if ( indexedDB === undefined  ) {
		//浏览器不支持数据库
		console.warn( 'Storage: IndexedDB not available.' );
		//返回空对象
		return { init: function () {}, get: function () {}, set: function () {}, clear: function () {} };

	}

	//数据库名称、数据版本
	var name = 'threejs-editor';
	var version = 1;

	//数据库句柄
	var database;

	return {
		//初始化
		init: function ( callback ) {
			//打开数据库
			var request = indexedDB.open( name, version );
			//数据库升级回调
			request.onupgradeneeded = function ( event ) {

				var db = event.target.result;

				if ( db.objectStoreNames.contains( 'states' ) === false ) {

					db.createObjectStore( 'states' );

				}

			};

			//数