<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分块图片实现</title>
<!--<script src="https://johnson2heng.github.io/vConsole/dist/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>-->
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body onload="init()">
</body>
<script src="https://cdn.bootcss.com/three.js/95/three.min.js"></script>
<script>
//声明一些全局变量
var renderer, camera, scene, geometry, material, mesh;
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer(); //实例化渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
document.body.appendChild(renderer.domElement); //添加到dom
}
//初始化场景
function initScene() {
scene = new THREE.Scene(); //实例化场景
}
//初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20000); //实例化相机
camera.position.set(0, 0, 3000);
}
//创建模型
function initMesh() {
material = new THREE.MeshBasicMaterial({map:new THREE.Texture()}); //创建材质
let sceneBlockModel = {
sceneWidth: 6912,
sceneHeight: 3456,
fileBlockWidth: 1024,
fileBlockHeight: 512,
dir: "636753681750720000/Block/"
};
let plane = new THREE.Mesh(new THREE.PlaneGeometry(sceneBlockModel.sceneWidth, sceneBlockModel.sceneHeight), material);
scene.add(plane);
let img = new Image();
img.onload = function () {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = sceneBlockModel.sceneWidth;
canvas.height = sceneBlockModel.sceneHeight;
ctx.drawImage(img, 0, 0, sceneBlockModel.sceneWidth, sceneBlockModel.sceneHeight);
material.map.image = canvas;
material.map.minFilter = THREE.LinearFilter;
material.map.generateMipmaps = false;
material.map.needsUpdate = true;
//加载分块图片
let xLen = Math.ceil(sceneBlockModel.sceneWidth / sceneBlockModel.fileBlockWidth);
let yLen = Math.ceil(sceneBlockModel.sceneHeight / sceneBlockModel.fileBlockHeight);
//延迟三秒开始加载分块图片
setTimeout(function () {
for (let x = 0; x < xLen; x++) {
for (let y = 0; y < yLen; y++) {
let img = new Image();
img.src = sceneBlockModel.dir + x + "_" + y + ".jpg";
img.onload = function () {
let texture = new THREE.Texture(img);
//获取渲染的起始位置
let position = new THREE.Vector2();
position.x = y * sceneBlockModel.fileBlockWidth;
if (x === yLen - 1) {
position.y = 0;
}
else {
position.y = (yLen - 2 - x) * sceneBlockModel.fileBlockHeight + (sceneBlockModel.sceneHeight % sceneBlockModel.fileBlockHeight);
}
renderer.copyTextureToTexture(position, texture, material.map);
}
}
}
}, 3000);
};
img.src = sceneBlockModel.dir + "preview.jpg";
}
//运行动画
function animate() {
requestAnimationFrame(animate); //循环调用函数
renderer.render(scene, camera); //渲染界面
}
//初始化函数，页面加载完成是调用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
animate();
}
</script>
</html> 一个人的力量不如两个人的，两个人的力量不如一群人的。欢迎加入大家庭一起共同学习，共同进步。