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))
}