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

1，功能介绍

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

2，功能实现

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

1.  
   // 创建canvas绘制内容并返回
2.  
   function getCanvasDrewTile1(color) {
3.  
   let canvas = document.createElement('canvas');
4.  
   let context = canvas.getContext('2d');
5.  
   canvas.height = 1024;
6.  
   canvas.width = 1024;
7.  
    
8.  
   context.fillStyle = color
9.  
   context.fillRect(0, 0, 1024, 1024)
10.  
     
11.  
    context.lineWidth = 3;
12.  
    context.strokeStyle = "#ffffff";
13.  
    context.moveTo(100, 100)
14.  
    context.lineTo(924, 100)
15.  
    context.lineTo(924, 924)
16.  
    context.lineTo(100, 924)
17.  
    context.lineTo(100, 100)
18.  
    context.stroke()
19.  
     
20.  
    // 居中
21.  
    context.lineWidth = 1;
22.  
    context.fillStyle = "white";
23.  
    context.font = '40px "微软雅黑"';
24.  
    context.textAlign = "center";
25.  
    context.textBaseline = "middle";
26.  
    context.strokeText("tile_1", 512, 512);
27.  
    return canvas;
28.  
    }
29.  
     
30.  
    // 创建六面材质并返回
31.  
    function getTexturesFromAtlas() {
32.  
     
33.  
    let materials = [];
34.  
     
35.  
    for (let i = 0; i < 6; i ) {
36.  
    // 创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图
37.  
    let texture = new THREE.Texture();
38.  
    // 贴图采样模式
39.  
    texture.minFilter = THREE.LinearFilter;
40.  
    // 贴图设置手动生成
41.  
    texture.generateMipmaps = false;
42.  
     
43.  
    // 基础网格材质(MeshBasicMaterial)
44.  
    let material = new THREE.MeshBasicMaterial({
45.  
    map: texture,
46.  
    })
47.  
     
48.  
    materials.push(material);
49.  
     
50.  
    }
51.  
     
52.  
    return materials;
53.  
     
54.  
    }
55.  
     
56.  
    var geometryBox = new THREE.BoxGeometry(100, 100, 100);
57.  
    geometryBox.scale(1, 1, -1);
58.  
     
59.  
    // 获取六面材质
60.  
    var materialArray = getTexturesFromAtlas();
61.  
    // 右，左，上，下，前，后
62.  
    var color = [
63.  
    ["#567bff", "#ccaa00", "#56aa21", "#9ac9d9", "#525e5e", "#dd4422"],
64.  
    [4, 1, 0, 2, 3, 5]
65.  
    ];
66.  
     
67.  
    // 创建立方体物体，并添加到场景中
68.  
    var geometryBoxMesh = new THREE.Mesh(geometryBox, materialArray);
69.  
    scene.add(geometryBoxMesh)
70.  
     
71.  
    // 更新每一面贴图
72.  
    for (let i = 0; i < 6; i ) {
73.  
    let texture1 = new THREE.CanvasTexture(getCanvasDrewTile1(color[0][i]));
74.  
     
75.  
    let material = materialArray[color[1][i]];
76.  
     
77.  
    setTimeout(function() {
78.  
    material.map = texture1;
79.  
    }, 500 * i)
80.  
    }

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

1.  
   function getCanvasDrewTile2(color) {
2.  
   let canvas = document.createElement('canvas');
3.  
   let context = canvas.getContext('2d');
4.  
   canvas.height = 1024 / 2;
5.  
   canvas.width = 1024 / 2;
6.  
    
7.  
   context.fillStyle = color
8.  
   context.fillRect(0, 0, 1024 / 2, 1024 / 2)
9.  
    
10.  
    context.lineWidth = 3;
11.  
    context.strokeStyle = "#ffffff";
12.  
    context.moveTo(100 / 2, 100 / 2)
13.  
    context.lineTo(924 / 2, 100 / 2)
14.  
    context.lineTo(924 / 2, 924 / 2)
15.  
    context.lineTo(100 / 2, 924 / 2)
16.  
    context.lineTo(100 / 2, 100 / 2)
17.  
    context.stroke()
18.  
     
19.  
    // 居中
20.  
    context.lineWidth = 1;
21.  
    context.fillStyle = "white";
22.  
    context.font = '20px "微软雅黑"';
23.  
    context.textAlign = "center";
24.  
    context.textBaseline = "middle";
25.  
    context.strokeText("tile_2", 512 / 2, 512 / 2);
26.  
    return canvas;
27.  
    }
28.  
     
29.  
     
30.  
    // 获取渲染的起始位置
31.  
    for (let i = 0; i < 6; i ) {
32.  
    let texture1 = new THREE.CanvasTexture(getCanvasDrewTile1(color[0][i]));
33.  
     
34.  
    let material = materialArray[color[1][i]];
35.  
     
36.  
    let position = new THREE.Vector2();
37.  
     
38.  
    let texture = new THREE.CanvasTexture(getCanvasDrewTile2(color[0][i]));
39.  
     
40.  
    setTimeout(function() {
41.  
    for (let j = 0; j < 2; j ) {
42.  
    for (let k = 0; k < 2; k ) {
43.  
    position.x = j * 512;
44.  
    position.y = k * 512;
45.  
    renderer.copyTextureToTexture(position, texture, material.map);
46.  
    }
47.  
    }
48.  
    }, 500 * (i 1))
49.  
    }

这篇好文章是转载于：学新通技术网