mirror of
https://gitee.com/ice-gl/icegl-three-vue-tres.git
synced 2025-04-05 06:22:43 +08:00
整理了 tresProcessing库 实例
This commit is contained in:
hawk86104
parent
e8442aa1a1
commit
507f180485
|
Before Width: | Height: | Size: 384 KiB After Width: | Height: | Size: 384 KiB |
BIN
public/plugins/basic/tresProcessing/preview/outlinePass.png
Normal file
BIN
public/plugins/basic/tresProcessing/preview/outlinePass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-11-03 15:07:09
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-12-26 09:32:36
|
||||
* @LastEditTime: 2025-03-02 09:49:07
|
||||
*/
|
||||
export default {
|
||||
name: 'basic',
|
||||
@ -110,13 +110,6 @@ export default {
|
||||
referenceSource: { title: 'FakeGlow', url: 'https://r3f-fake-glow-material.vercel.app/' },
|
||||
},
|
||||
{ src: 'plugins/basic/shine/preview/bloomPass.png', type: 'img', name: 'bloomPass', title: '后期处理-效果叠加' },
|
||||
{
|
||||
src: 'plugins/basic/shine/preview/tresProcessing.png',
|
||||
type: 'img',
|
||||
name: 'tresProcessing',
|
||||
title: 'Tres的后期处理',
|
||||
referenceSource: { title: 'post-processing.tresjs', url: 'https://post-processing.tresjs.org/guide/' },
|
||||
},
|
||||
{ src: 'plugins/basic/shine/preview/MaskPass.png', type: 'img', name: 'MaskPass', title: '后期处理-掩膜通道' },
|
||||
{ src: 'plugins/basic/shine/preview/effectComposerLayers.png', type: 'img', name: 'effectComposerLayers', title: '后期处理-图层叠加' },
|
||||
{
|
||||
@ -129,5 +122,27 @@ export default {
|
||||
{ src: 'plugins/basic/shine/preview/effectComposerMultiple.png', type: 'img', name: 'effectComposerMultiple', title: '后期处理-多个叠加' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'tresProcessing',
|
||||
title: 'tresProcessing库',
|
||||
intro: '直接使用tres的后期处理库实例',
|
||||
pNode: 'basic',
|
||||
preview: [
|
||||
{
|
||||
src: 'plugins/basic/tresProcessing/preview/fusion.png',
|
||||
type: 'img',
|
||||
name: 'fusion',
|
||||
title: '融合多个后期效果',
|
||||
referenceSource: { title: 'post-processing.tresjs', url: 'https://post-processing.tresjs.org/guide/' },
|
||||
},
|
||||
{
|
||||
src: 'plugins/basic/tresProcessing/preview/outlinePass.png',
|
||||
type: 'img',
|
||||
name: 'outlinePass',
|
||||
title: '外边框处理',
|
||||
referenceSource: { title: 'post-processing.tresjs', url: 'https://post-processing.tresjs.org/guide/' },
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-12-12 17:54:36
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2025-02-05 11:38:30
|
||||
-->
|
||||
<template>
|
||||
<TresCanvas window-size clearColor="#000000">
|
||||
<TresPerspectiveCamera :position="[10, 10, 10]" />
|
||||
<TresAmbientLight :intensity="1" />
|
||||
<OrbitControls />
|
||||
<Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" />
|
||||
<TresMesh :position="[0, 2, -4]">
|
||||
<TresBoxGeometry :args="[1, 1, 1]" />
|
||||
<TresMeshNormalMaterial />
|
||||
</TresMesh>
|
||||
<TresGridHelper :args="[10, 10]" />
|
||||
|
||||
<EffectComposer>
|
||||
<UnrealBloom :radius="0.8" :strength="2.5" :threshold="0.8" />
|
||||
<Glitch />
|
||||
<SMAA :width="1920" :height="1080" />
|
||||
<Output />
|
||||
</EffectComposer>
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { OrbitControls, Box } from '@tresjs/cientos'
|
||||
import { EffectComposer, UnrealBloom, Glitch, Output, SMAA } from '@tresjs/post-processing'
|
||||
</script>
|
||||
33
src/plugins/basic/pages/tresProcessing/fusion.vue
Normal file
33
src/plugins/basic/pages/tresProcessing/fusion.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-12-12 17:54:36
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2025-03-02 09:42:10
|
||||
-->
|
||||
<template>
|
||||
<TresCanvas window-size clearColor="#000000">
|
||||
<TresPerspectiveCamera :position="[10, 10, 10]" />
|
||||
<TresAmbientLight :intensity="1" />
|
||||
<OrbitControls />
|
||||
<Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" />
|
||||
<TresMesh :position="[0, 2, -4]">
|
||||
<TresBoxGeometry :args="[1, 1, 1]" />
|
||||
<TresMeshNormalMaterial />
|
||||
</TresMesh>
|
||||
<TresGridHelper :args="[10, 10]" />
|
||||
|
||||
<EffectComposer>
|
||||
<UnrealBloom :radius="0.8" :strength="2.5" :threshold="0.8" />
|
||||
<Glitch />
|
||||
<SMAA :width="1920" :height="1080" />
|
||||
<Output />
|
||||
</EffectComposer>
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { OrbitControls, Box } from '@tresjs/cientos'
|
||||
import { EffectComposer, UnrealBloom, Glitch, Output, SMAA } from '@tresjs/post-processing'
|
||||
</script>
|
||||
73
src/plugins/basic/pages/tresProcessing/outlinePass.vue
Normal file
73
src/plugins/basic/pages/tresProcessing/outlinePass.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2025-03-02 09:49:31
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2025-03-02 10:36:33
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { BasicShadowMap, NoToneMapping } from 'three'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { OrbitControls } from '@tresjs/cientos'
|
||||
import { TresCanvas } from '@tresjs/core'
|
||||
import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
|
||||
import * as THREE from 'three'
|
||||
|
||||
const outlinedObjects = ref<THREE.Object3D[]>([])
|
||||
|
||||
const gl = {
|
||||
clearColor: '#121212',
|
||||
}
|
||||
|
||||
function onClick(ev) {
|
||||
if (ev) {
|
||||
let hasIndex = -1
|
||||
const outlinedObjectsArr = [...outlinedObjects.value]
|
||||
outlinedObjectsArr.forEach((obj, index) => {
|
||||
if (obj.uuid === ev.object.uuid) {
|
||||
hasIndex = index
|
||||
}
|
||||
})
|
||||
if (hasIndex !== -1) {
|
||||
outlinedObjectsArr.splice(hasIndex, 1)
|
||||
} else {
|
||||
outlinedObjectsArr.push(ev.object)
|
||||
}
|
||||
outlinedObjects.value = outlinedObjectsArr
|
||||
console.log('outlinedObjects', outlinedObjects.value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TresCanvas window-size v-bind="gl">
|
||||
<TresPerspectiveCamera :position="[10, 10, 10]" />
|
||||
<TresAmbientLight :intensity="1" />
|
||||
<OrbitControls />
|
||||
<TresMesh :position="[-5, 0, 0]" @click="onClick" :scale="2">
|
||||
<TresBoxGeometry :args="[1, 1, 1]" />
|
||||
<TresMeshNormalMaterial />
|
||||
</TresMesh>
|
||||
|
||||
<TresMesh :position="[1, 0.5, 1]" @click="onClick">
|
||||
<TresBoxGeometry />
|
||||
<TresMeshStandardMaterial color="hotpink" />
|
||||
</TresMesh>
|
||||
|
||||
<TresGroup @click="onClick">
|
||||
<TresMesh :position="[2.5, 1.75, 2]">
|
||||
<TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
|
||||
<TresMeshStandardMaterial color="green" />
|
||||
</TresMesh>
|
||||
<TresMesh :position="[-1.5, 0.75, 0]">
|
||||
<TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
|
||||
<TresMeshStandardMaterial color="aqua" />
|
||||
</TresMesh>
|
||||
</TresGroup>
|
||||
|
||||
<EffectComposerPmndrs>
|
||||
<OutlinePmndrs :outlinedObjects="outlinedObjects" :edge-strength="20000000" :pulse-speed="1" visible-edge-color="#ffff00" />
|
||||
</EffectComposerPmndrs>
|
||||
</TresCanvas>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user