three.js 之 Loader加载器

// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
const model = new THREE.Group() //声明一个组对象，用来添加加载成功的三维场景
const loader = new GLTFLoader() //创建一个GLTF加载器
loader.load(`${process.env.BASE_URL}model/model.gltf`, (gltf) => {
  //gltf加载成功后返回一个对象
  console.log('控制台查看gltf对象结构', gltf)
  //gltf.scene可以包含网格模型Mesh、光源Light等信息，至于gltf.scene是否包含光源，要看.gltf文件中是否有光源信息
  console.log('gltf对象场景属性', gltf.scene)
  //把gltf.scene中的所有模型添加到model组对象中
  model.add(gltf.scene)
})
const scene = new THREE.Scene()
scene.add(model) // 把三维模型添加到场景中

const loader = new THREE.GLTFLoader();
loader.loadAsync(`${process.env.BASE_URL}model/model.gltf`, (gltf) => { // gltf加载成功后返回一个对象 该对象是模型信息
      console.log('控制台查看gltf对象结构', gltf)
      // gltf.scene可以包含网格模型Mesh、光源Light等信息，至于gltf.scene是否包含光源，要看.gltf文件中是否有光源信息
      console.log('gltf对象场景属性', gltf.scene)
    }).then(() => {
    ... 调用成功的方法
    }).catch(()=>{
    ... 调用失败的方法
})

// 创建加载器
const gltfLoader = new THREE.GLTFLoader(); 
// 用async/await来获取模型的异步数据
const result = await gltfLoader.loadAsync("car/scene.gltf"); // promise解析后的模型数据

class Person {
  // 创建加载器
  gltfLoader = new THREE.GLTFLoader()

  // 在箭头函数的()前添加async 关键字
  loadIphone = async () => {
    // 用async/await来获取模型的异步数据
    const result = await gltfLoader.loadAsync('car/scene.gltf') 
    console.log(result) // promise解析后的模型数据
  }

  createScene = () => {
    // 在需要模型的方法里调用异步数据
    this.loadIphone()
  }
}

const renderer = new THREE.WebGLRenderer({
  antialias: true // 开启锯齿
})
renderer.outputEncoding = THREE.sRGBEncoding// 解决加载gltf格式模型纹理贴图和原图不一样问题

// 创建纹理贴图
var texture = new THREE.TextureLoader().load( './scene/model_img3.png' );//加载纹理贴图
// 创建一个平面缓冲几何体(面)
var geometry = new THREE.PlaneGeometry(185, 260);
// 创建一个网格朗伯材质
var material = new THREE.MeshLambertMaterial({ 
    // 设置渲染面
    side: THREE.DoubleSide ,
    // 设置纹理贴图
    map:texture,
});
//设置纹理贴图编码方式和WebGL渲染器一致  如过导入了map纹理贴图 需要map.encoding
material.map.encoding = THREE.sRGBEncoding;
//  声明网格模型 导入平面缓冲几何体(面)和网格材质
var plane = new THREE.Mesh(geometry, material);

// 静态资源设置
assetsInclude: ['**/*.gltf', '**/*.glb'],

// 导入手机模型gltf
import huawei from '@/assets/iphone/huaweiB.glb'
// 创建glTF加载器
const loader = new GLTFLoader()
// 异步获得加载的模型
const gltf = await this.loader.loadAsync(huawei)

// 导入手机模型gltf
import huawei from '@/assets/iphone/手机.glb'

// 静态绝对路径导入 可以省去/public/
import car from '/car/轿车.gltf'
const gltf = await loader.loadAsync('/car/轿车.gltf')

// 或通过import.meta.env.BASE_URL进行导入
const gltf = await loader.loadAsync(
  `${import.meta.env.BASE_URL}car/轿车.gltf`
)

const loader = new GLTFLoader(); //创建一个GLTF加载器
loader.load(`${process.env.BASE_URL}model/model.gltf`, function (gltf) { // 进行process.env.BASE_URL 和 资源绝对路径的拼接
// ...进行操作
})

// require方式导入 (适合webpack和vite)
const img = require('@/assets/火焰/火焰.png')
// import方式导入 (适合vite)
import img from '@/assets/火焰/火焰.png'
// 加载导入的纹理贴图
const texture = textureLoader.load(img)

// 创建纹理加载器
const textureLoader = new THREE.TextureLoader()
// 导入一张纹理贴图
import someJPG from '@/assets/door/alpha.jpg'

// 创建异步加载
const loader = async () => {
    // 加载一张贴图
  const loaderSome = await textureLoader.loadAsync(someJPG)
}

// 创建环境贴图加载器
const cubeLoader = new THREE.CubeTextureLoader()

// 创建异步加载
const loader = async () => {
  // 参数为数组，数组中的每一项都是一个图片的路径
  const loaderSome = await cubeLoader
    .setPath('textures/cubeMaps/')
    .loadAsync(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'])
}

// 导入json字体加载器
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
// 导入three.js的json字体, url资源需要在后缀加上?url
import helvetiker from '@/assets/iphone/font/text.json?url'

// 创建字体加载器
const fontLoader = new FontLoader()

// 创建异步加载
const loader = async () => {
  // 只支持json格式的字体
  const fontSome = await fontLoader.loadAsync(helvetiker)
}

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
// 1. 创建three.js场景
const scene = new THREE.Scene()
// 添加HDR贴图
const HDRloader = new RGBELoader()
// 异步加载HDR贴图
HDRloader.loadAsync('hdr/002.hdr').then((HDRtexture) => {
  // 设置HDR贴图的贴图环绕方式
  HDRtexture.mapping = THREE.EquirectangularReflectionMapping
  // 给场景设置HDR背景图
  scene.background = HDRtexture
  // 给场景内所有的物体添加默认的环境贴图 (如果物体不单独设置环境贴图 默认使用这个环境贴图)
  scene.environment = HDRtexture
})

  // 声明一个加载器的常量
  const textureLoader = new THREE.TextureLoader()
  // 创建纹理
  const texture = textureLoader.load(logo)
  // 创建灰度纹理
  const textureGray = textureLoader.load(logoGray)
  // 创建环境遮挡贴图
  const textureEnv = textureLoader.load(logoEnv)
  // 创建置换纹理
  const textureDisplacementMap = textureLoader.load(displacementMap)
  // 创建粗糙度纹理
  const textureRoughness = textureLoader.load(roughness)
  // 创建金属贴图
  const textureMetalness = textureLoader.load(metalness)
  // 创建法线贴图
  const textureNormal = textureLoader.load(normal)
  // 创建一个在网格模型中展示的几何体
  const cubeGeometry = new THREE.BoxGeometry(3, 3, 3, 200, 200, 200) // 参数为长宽高 以及长宽高的分段数 横截面，利于变形使用，段数越多越柔和，则段数越少越生硬。
  // 使用PBR材质
  const cubeMaterial = new THREE.MeshStandardMaterial({
    // 设置纹理贴图image.png
    map: texture,
    // 设置灰度纹理贴图
    alphaMap: textureGray,
    // 设置透明度 一定要把透明度设置为true
    transparent: true,
    // 设置环境遮挡贴图
    aoMap: textureEnv,
    // 设置环境遮挡贴图强度
    aoMapIntensity: 1, // 默认为1 最小值为0 最大值为1
    // 使用置换纹理
    displacementMap: textureDisplacementMap,
    // 设置置换纹理强度
    displacementScale: 0.1, // 默认为1 最小值为0 最大值为1
    // 设置粗糙度纹理
    roughnessMap: textureRoughness,
    // 设置粗糙度
    // roughness: 0.5, // 默认为0.5 最小值为0 最大值为1
    // 设置金属度
    metalness: 0.5, // 默认为0.5 最小值为0 最大值为1
    // 设置金属贴图
    metalnessMap: textureMetalness,
    // 导入法线贴图
    normalMap: textureNormal
  })

  // 创建一个网格模型 放入创建的几何体和其自身材质
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial) // Mesh(几何体, 纹理材质)
  // 设置环境遮挡贴图第二组uv坐标 (就是把第一组uv坐标的值赋值给第二组uv坐标)
  cube.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(cube.geometry.attributes.uv.array, 2))

  // 将几何体添加到场景中
  scene.add(cube)

// 导入加载方法
import { loadTexture } from '@/utils/loading'
// 创建glTF加载器时候使用加载方法
const loader = new GLTFLoader(loadTexture())