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))
-
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfiaijg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13