个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 待整理
  • 相机
  • 核心
  • 几何体
  • 辅助对象
  • 灯光
  • 材质
  • 数学库
  • 物体
  • 控制
  • 常用方法
  • 三方库
  • 加载器
    • TextureLoader
      • 构造函数
      • 方法
    • LoadingManager
      • 属性
    • CubeTextureLoader
    • DataTextureLoader
  • 纹理贴图
  • PBR
  • 相关网站
  • 场景
  • 全景投影方式
  • HDR
  • 渲染器
  • Geometry和BufferGeometry区别
  • WebGL
  • UV介绍
  • 数学知识
  • 着色器案例
  • blender
  • 后期处理
  • 缓冲区
  • 后期处理与分层渲染
  • 叠加渲染
  • Threejs
NeverStop1024
2022-09-20
目录

加载器

# TextureLoader (opens new window)

加载Texture (opens new window)的一个类,想要加载纹理贴图,必须要先实例化TextureLoader。

# 构造函数

构造函数可以传一个参数,manager (opens new window)加载器,用来监听加载。

# 方法

  • load (opens new window)

加载一个文件作为贴图,同时有onLoad、onProgress、onError回调

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
1
2
3

# LoadingManager (opens new window)

加载器的管理器,其功能是处理并跟踪已加载和待处理的数据.

# 属性

  • onStart (opens new window) 开始回调
  • onLoad (opens new window) 所有加载完成回调
  • onProgress (opens new window) 每项加载完成回调,可以计算加载进度
  • onError (opens new window) 遇到错误时回调
let event = {};
// 单张纹理图的加载
event.onLoad = function () {
  console.log("图片加载完成");
};
event.onProgress = function (url, num, total) {
  console.log("图片加载完成:", url);
  console.log("图片加载进度:", num);
  console.log("图片总数:", total);
  let value = ((num / total) * 100).toFixed(2) + "%";
  console.log("加载进度的百分比:", value);
};
event.onError = function (e) {
  console.log("图片加载出现错误");
  console.log(e);
};

// 设置加载管理器
const loadingManager = new THREE.LoadingManager(
  event.onLoad,
  event.onProgress,
  event.onError
);

// 导入纹理
const textureLoader = new THREE.TextureLoader(loadingManager);
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");

const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAoTexture = textureLoader.load(
  "./textures/door/ambientOcclusion.jpg"
);
//导入置换贴图
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg");
// 导入粗糙度贴图
const roughnessTexture = textureLoader.load("./textures/door/roughness.jpg");
// 导入金属贴图
const metalnessTexture = textureLoader.load("./textures/door/metalness.jpg");
// 导入法线贴图
const normalTexture = textureLoader.load("./textures/door/normal.jpg");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

Z9uIhT_b6nv1g

# CubeTextureLoader (opens new window)

用来加载CubeTexture (opens new window),作用与TextureLoader (opens new window)类似

# DataTextureLoader (opens new window)

用于加载二进制文件格式的(rgbe, hdr, ...)的抽象类。

编辑 (opens new window)
上次更新: 2022/09/21
三方库
纹理贴图

← 三方库 纹理贴图→

最近更新
01
mock使用
07-12
02
websocket即时通讯
07-12
03
前端面试题
07-09
更多文章>
Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式