Threejs实现VR全景/模拟krpano异步加载/局部纹理刷新/图分层加载/瓦片加载

1，功能介绍

使用 Threejs实现WebVR全景，模拟krpano异步加载、分层加载、瓦片加载、顺序加载，Threejs实现局部纹理刷新，效果如下图：

2，功能实现

Canvas纹理（CanvasTexture），从Canvas元素中创建纹理贴图。

// 创建canvas绘制内容并返回
function getCanvasDrewTile1(color) {
	let canvas = document.createElement('canvas');
	let context = canvas.getContext('2d');
	canvas.height = 1024;
	canvas.width = 1024;

	context.fillStyle = color
	context.fillRect(0, 0, 1024, 1024)

	context.lineWidth = 3;
	context.strokeStyle = "#ffffff";
	context.moveTo(100, 100)
	context.lineTo(924, 100)
	context.lineTo(924, 924)
	context.lineTo(100, 924)
	context.lineTo(100, 100)
	context.stroke()

	// 居中
	context.lineWidth = 1;
	context.fillStyle = "white";
	context.font = '40px "微软雅黑"';
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.strokeText("tile_1", 512, 512);
	return canvas;
}

// 创建六面材质并返回
function getTexturesFromAtlas() {

	let materials = [];

	for (let i = 0; i < 6; i++) {
        // 创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图
		let texture = new THREE.Texture();
        // 贴图采样模式
		texture.minFilter = THREE.LinearFilter;
        // 贴图设置手动生成
		texture.generateMipmaps = false;

        // 基础网格材质(MeshBasicMaterial)
		let material = new THREE.MeshBasicMaterial({
			map: texture,
		})

		materials.push(material);

	}

	return materials;

}

var geometryBox = new THREE.BoxGeometry(100, 100, 100);
geometryBox.scale(1, 1, -1);

// 获取六面材质
var materialArray = getTexturesFromAtlas();
// 右，左，上，下，前，后
var color = [
	["#567bff", "#ccaa00", "#56aa21", "#9ac9d9", "#525e5e", "#dd4422"],
	[4, 1, 0, 2, 3, 5]
];

// 创建立方体物体，并添加到场景中
var geometryBoxMesh = new THREE.Mesh(geometryBox, materialArray);
scene.add(geometryBoxMesh)

// 更新每一面贴图
for (let i = 0; i < 6; i++) {
	let texture1 = new THREE.CanvasTexture(getCanvasDrewTile1(color[0][i]));

	let material = materialArray[color[1][i]];

	setTimeout(function() {
		material.map = texture1;
	}, 500 * i)
}

第二层绘制跟第一层方法一样

function getCanvasDrewTile2(color) {
	let canvas = document.createElement('canvas');
	let context = canvas.getContext('2d');
	canvas.height = 1024 / 2;
	canvas.width = 1024 / 2;

	context.fillStyle = color
	context.fillRect(0, 0, 1024 / 2, 1024 / 2)

	context.lineWidth = 3;
	context.strokeStyle = "#ffffff";
	context.moveTo(100 / 2, 100 / 2)
	context.lineTo(924 / 2, 100 / 2)
	context.lineTo(924 / 2, 924 / 2)
	context.lineTo(100 / 2, 924 / 2)
	context.lineTo(100 / 2, 100 / 2)
	context.stroke()

	// 居中
	context.lineWidth = 1;
	context.fillStyle = "white";
	context.font = '20px "微软雅黑"';
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.strokeText("tile_2", 512 / 2, 512 / 2);
	return canvas;
}


// 获取渲染的起始位置
for (let i = 0; i < 6; i++) {
	let texture1 = new THREE.CanvasTexture(getCanvasDrewTile1(color[0][i]));

	let material = materialArray[color[1][i]];

	let position = new THREE.Vector2();

	let texture = new THREE.CanvasTexture(getCanvasDrewTile2(color[0][i]));

	setTimeout(function() {
		for (let j = 0; j < 2; j++) {
			for (let k = 0; k < 2; k++) {
				position.x = j * 512;
				position.y = k * 512;
				renderer.copyTextureToTexture(position, texture, material.map);
			}
		}
	}, 500 * (i + 1))
}