👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：threejs gis工程师
一、🍀前言
本文详细介绍如何基于threejs在三维场景中局部纹理刷新，实现图片分块加载，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️Texture 贴图
创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。
构造函数：
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )
常用属性：
方法：
二、🍀局部纹理刷新，实现图片分块加载
1. ☘️实现思路
- 1、初始化renderer渲染器
- 2、初始化Scene三维场景scene。
- 3、初始化camera相机，定义相机位置 camera.position.set
- 4、创建THREE.MeshBasicMaterial基础材质material。传入THREE.PlaneGeometry平面几何体（使用配置参数）和material创建THREE.Mesh网格对象plane，scene场景中添加plane。创建Image对象img，调用img的onload方法，实现material材质贴图的分块加载，具体代码参考下面代码样例。
2. ☘️代码样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn62(实现局部纹理刷新--图片分块加载)</title>
<script src="lib/threejs/127/three.js-master/build/three.js"></script>
<!--<script src="lib/threejs/91/three.js"></script>-->
</head>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
/*width: 4000px;*/
/*height: 2000px;*/
display: block;
}
</style>
<body onload="init()">
</body>
<script>
var renderer, camera, scene, geometry, material, mesh
var initRender = () => {
renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
}
var initScene = () => {
scene = new THREE.Scene()
}
var initCamera = () => {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20000)
camera.position.set(0, 0, 3000)
}
var initMesh = () => {
material = new THREE.MeshBasicMaterial({map: new THREE.Texture()})
let sceneBlockModel = {
sceneWidth: 6912,
sceneHeight: 3456,
fileBlockWidth: 1024,
fileBlockHeight: 512,
dir: 'data/img/fenge/'
}
let plane = new THREE.Mesh(new THREE.PlaneGeometry(sceneBlockModel.sceneWidth, sceneBlockModel.sceneHeight), material)
scene.add(plane)
let img = new Image()
img.onload = () => {
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(() => {
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) + 125
}
renderer.copyTextureToTexture(position, texture, material.map)
}
}
}
}, 3000)
}
img.src = 'data/img/fengeyt/preview.jpg'
}
var animate = () => {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
var init = () => {
initRender()
initScene()
initCamera()
initMesh()
animate()
}
</script>
</html>
效果如下：
