学习threejs，局部纹理刷新，实现图片分块加载

news2024/12/15 13:07:12

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️Texture 贴图
二、🍀局部纹理刷新，实现图片分块加载
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于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>