项目依赖升级说明

本项目正在升级依赖库，基于 Vue3 框架，涉及 Tres V5、Cientos V4 以及 Three.js (r174 → r180) 的版本更新。

目前已做了70%左右的更行，项目所有依赖库全部更新到最新版本，全面拥抱ES Module，具体项目分支详见：
https://gitee.com/ice-gl/icegl-three-vue-tres/tree/tres-v5_fes-v4/

预计10月中旬全部升级完毕
下面字段可以通过ai编程软件，给您自己之前写的代码做修改，下面文字喂给ai就好，强烈不建议国内的大语言模型，能力有限。

主要改动点如下：

1. useRenderLoop → useLoop

之前的写法：

import { useRenderLoop } from '@tresjs/core'

const { onLoop, onBeforeLoop } = useRenderLoop()

onLoop(({ delta, elapsedTime }) => {})
onBeforeLoop(({ delta, elapsedTime }) => {})

现在的写法：

import { useLoop } from '@tresjs/core'

const { onRender, onBeforeRender } = useLoop()

onRender(({ delta, elapsedTime }) => {})
onBeforeRender(({ delta, elapsedTime }) => {})

⚠️ 注意：
直接替换 onLoop → onRender 会导致 时间卡顿（delta 不准确），需要改为 onBeforeRender 才能正常。

2. useTresContext → useTres

之前的写法：

import { useTresContext } from '@tresjs/core'

const { camera, renderer, scene, sizes } = useTresContext()

// 使用
scene.value
camera.value
renderer.value
sizes.width.value
sizes.height.value

现在的写法：

import { useTres } from '@tresjs/core'

const { camera, renderer, scene, sizes } = useTres()

// 使用
scene.value
camera.value
renderer
sizes.width.value
sizes.height.value

3. useTexture 单个纹理加载

之前的写法：

import { useTexture } from '@tresjs/core'

// 示例 A
const { map: pTexture } = await useTexture({ map: './sprite.png' })
<TresMeshPhysicalMaterial :map="pTexture" />

// 示例 B
const { map: pTexture } = await useTexture({ map: './sprite.png' })
Material.map = pTexture

现在的写法：

import { useTexture } from '@tresjs/cientos'

// 示例 A
const { state: pTexture } = useTexture('./sprite.png')
<TresMeshPhysicalMaterial :map="pTexture" />

// 示例 B
import { watch } from 'vue'
const { state: pTexture } = useTexture('./sprite.png')

watch(
  () => pTexture.value,
  (mapv) => {
    if (mapv) {
      mapv.wrapS = THREE.RepeatWrapping
      Material.map = mapv
    }
  }
)

4. UseTexture 组件单图加载

之前的写法：

import { UseTexture } from '@tresjs/core'

<Suspense>
  <UseTexture v-slot="{ textures }" map="./rain.png">
    <TresMeshStandardMaterial :map="textures.map" />
  </UseTexture>
</Suspense>

现在的写法：

import { UseTexture } from '@tresjs/cientos'

<UseTexture v-slot="{ state: texture }" path="./rain.png">
  <TresMeshStandardMaterial :map="texture" />
</UseTexture>

5. useTextures 多图加载

之前的写法：

import { useTexture } from '@tresjs/core'

const pTexture = await useTexture(['./1.jpg', './2.jpg'])
Material.map = pTexture[0]
Material2.map = pTexture[1]

现在的写法：

import { watch } from 'vue'
import { useTextures } from '@tresjs/cientos'

const { textures: pTexture, isLoading } = useTextures(['./1.jpg', './2.jpg'])

watch([pTexture, isLoading], ([pTexture, isLoading]) => {
  if (pTexture && !isLoading) {
    Material.map = pTexture[0]
    Material2.map = pTexture[1]
  }
})

6. useGLTF 模型加载

之前的写法：

const { scene, nodes, materials, animations } = await useGLTF(
  '1.glb',
  { draco: true, decoderPath: './draco/' }
)

<primitive :object="scene" />

Object.values(nodes).forEach((node) => {
  if (node.isMesh) {
    // ...
  }
})

materials.Chrome.metalness = 1

const { actions } = useAnimations(animations, scene)
const currentAction = actions.Animation
currentAction.play()

现在的写法：

import { watch } from 'vue'

const { state: pState, nodes, materials, animations } = useGLTF(
  '1.glb',
  { draco: true, decoderPath: './draco/' }
)

<primitive v-if="pState" :object="pState?.scene" />

watch(
  () => pState.value,
  (state) => {
    if (!state?.scene) return

    // state.scene ...

    Object.values(materials.value).forEach((material: any) => {
      // material ...
    })

    Object.values(nodes.value).forEach((node: any) => {
      // node ...
    })

    const { actions } = useAnimations(animations, state.scene)
    const currentAction = actions.animationA
    currentAction.play()
  }
)

7. Three.js 升级 r174 → r180

改造点很简单：

<TresCanvas v-bind="tcState" />

import { SRGBColorSpace, ACESFilmicToneMapping, NoToneMapping } from 'three'

const state = reactive({
  outputColorSpace: SRGBColorSpace,
  toneMapping: ACESFilmicToneMapping, // NoToneMapping
  toneMappingExposure: 1.2
})

⚠️ 因为颜色空间默认值变动，建议手动设置为以上参数，显示效果更佳。