KTX2・DRACOによる圧縮・軽量化技術について

import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js'


~基本構文は省略~


// KTX2テクスチャを複数読み込んでPlaneに表示
const texturePaths = [
  '/image/sakura.ktx2',
  // '/image/school.ktx2',
]

//　画像表示用のplane
const planeGeometry = new THREE.PlaneGeometry(3.2, 2.2)
const xStart = 0
const xGap = 1.0

//　テクスチャの読み込み
texturePaths.forEach((path, index) => {
  ktx2Loader.load(path, (texture) => {
    texture.colorSpace = THREE.SRGBColorSpace
    texture.needsUpdate = true

    const material = new THREE.MeshStandardMaterial({ map: texture,side: THREE.DoubleSide })
    const plane = new THREE.Mesh(planeGeometry, material)
    plane.position.set(0, 0, xStart + xGap * index)
    plane.rotation.set(Math.PI,0,0);

    scene.add(plane)
    console.log(`Texture loaded: ${path}`)
  }, undefined, (error) => {
    console.error(`Error loading texture: ${path}`, error)
  })
})

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js'

～基本構文は省略～

// KTX2Loaderのセットアップ
const ktx2Loader = new KTX2Loader()
ktx2Loader.setTranscoderPath('https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/basis/')
ktx2Loader.detectSupport(renderer)

// DRACOLoaderのセットアップ
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.7/')

// GLTFLoaderのセットアップ
const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.setKTX2Loader(ktx2Loader)

// モデルの読み込み
gltfLoader.load(
  '/model/MyModel.glb',
  (gltf:any) => {
    console.log('Model loaded successfully!')
    const model = gltf.scene
    
    // モデルのサイズを調整
    const box = new THREE.Box3().setFromObject(model)
    const center = box.getCenter(new THREE.Vector3())
    const size = box.getSize(new THREE.Vector3())
    const maxDim = Math.max(size.x, size.y, size.z)
    const scale = 2 / maxDim
    model.scale.multiplyScalar(scale)
    
    // モデルを中央に配置
    const adjustedCenter = box.getCenter(new THREE.Vector3()).multiplyScalar(scale)
    model.position.sub(adjustedCenter)
    
    scene.add(model)
  },
  (progress:any) => {
    const percent = (progress.loaded / progress.total) * 100
    console.log(`Loading: ${percent.toFixed(2)}%`)
  },
  (error:any) => {
    console.error('Error loading model:', error)
  }
)

npm install --save @gltf-transform/core @gltf-transform/extensions @gltf-transform/functions