增加pcss的实例

README.md

@@ -162,7 +162,6 @@
 
 -   二次开发如用于商业性质或开源竞品请不要删除和修改 TvT.js 源码头部的版权与作者声明及出处
 -   允许进行商用，但是不允许二次开源出来并进行收费
--   我们已在申请相关的软件著作权和相关登记
 
 本项目包含的第三方源码和二进制文件之版权信息另行标注。
 

src/app.jsx

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-04-16 09:09:13
+ * @LastEditTime: 2024-04-29 16:57:29
  */
 import { defineRuntimeConfig, useModel } from '@fesjs/fes'
 import { FMenu } from '@fesjs/fes-design'
@@ -57,7 +57,6 @@ export function onAppCreated ({ app }) {
         `))
         console.log(chalk.hex('#5384ff').bold('· 二次开发如用于商业性质或开源竞品请不要删除和修改 TvT.js 源码头部的版权与作者声明及出处。'))
         console.log(chalk.hex('#5384ff').bold('· 本项目遵循 Apache2 开源协议发布，并提供永久免费使用以及商用，但是不允许二次开源出来并进行收费。'))
-        console.log(chalk.hex('#5384ff').bold('· 我们已在申请相关的软件著作权和相关登记。'))
         console.log(chalk.hex('#1c86e5').bold('版权所有 Copyright © 2022-2025 by 🧊icegl (https://www.icegl.cn)'))
     // }
 }

src/plugins/basic/components/forCientos/Pcss/index.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-29 16:47:31
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-29 17:28:16
+-->
+<template></template>
+<script lang="ts" setup>
+import { defineProps, withDefaults, watch } from 'vue'
+import { Mesh } from 'three'
+import { useTresContext } from '@tresjs/core'
+import { pcss } from './index.ts'
+
+const props = withDefaults(
+    defineProps<{
+        enabled?: boolean
+        size?: number
+        focus?: number
+        samples?: any
+    }>(),
+    {
+        enabled: true,
+        size: 25,
+        focus: 0,
+        samples: 10,
+    },
+)
+
+const { camera, renderer, scene } = useTresContext()
+let reset = null as any
+
+const updatePCSS = (args: { enabled: boolean; size: number; focus: number; samples: number }) => {
+    const { enabled, size, focus, samples } = args
+
+    if (reset) {
+        reset(renderer.value, scene.value, camera.value)
+        reset = null
+    }
+
+    if (enabled) {
+        reset = pcss({ focus, size, samples })
+
+        scene.value.traverse((object) => {
+            if (object instanceof Mesh) {
+                object.material.dispose()
+            }
+        })
+    }
+}
+updatePCSS(props)
+
+watch(props, () => {
+    updatePCSS(props)
+})
+</script>

src/plugins/basic/index.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-04-09 11:27:03
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-04-26 11:05:48
+ * @LastEditTime: 2024-04-29 16:51:19
  */
 
 import Environment from './components/forCientos/useEnvironment/component.vue'
@@ -13,5 +13,6 @@ import { useFBO } from './components/forCientos/useFBO/index.ts'
 import TransmissionMaterial from './components/forCientos/TransmissionMaterial/index.vue'
 import Center from './components/forCientos/Center/index.vue'
 import Caustics from './components/forCientos/Caustics/index.vue'
+import Pcss from './components/forCientos/Pcss/index.vue'
 
-export { Environment, Lightformer, useFBO, TransmissionMaterial, Center, Caustics }
+export { Environment, Lightformer, useFBO, TransmissionMaterial, Center, Caustics, Pcss }

src/plugins/eCommerce/components/roomup/roomMesh.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes, materials } = await useGLTF('./plugins/eCommerce/model/room-transformed.glb', { draco: true, decoderPath: './draco/' })
+</script>
+
+<template>
+    <TresGroup :rotation="[-Math.PI / 2, 0, 0]">
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_2.geometry" :material="materials.Material" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_3.geometry" :material="materials[`Material.002`]" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_4.geometry" :material="materials[`Material.003`]" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_6.geometry" :material="materials.krzeslo_1" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_7.geometry" :material="materials.krzeslo_okno" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_8.geometry" :material="materials.krzeslo_prawe" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_9.geometry" :material="materials.krzeslo_srodek" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_10.geometry" :material="materials.podloga" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_11.geometry" :material="materials.sciana_okno" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_12.geometry" :material="materials[`stolik.001`]" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_16.geometry" :material="materials[`Material.006`]" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_5.geometry" :material="materials[`Material.004`]" />
+        <TresMesh :geometry="nodes.Object_13.geometry">
+            <TresMeshStandardMaterial transparent :opacity="0.5" />
+        </TresMesh>
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_14.geometry" :material="materials[`Material.002`]" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_15.geometry" :material="materials[`Material.005`]" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_17.geometry" :material="materials.mata" />
+        <TresMesh castShadow receiveShadow :geometry="nodes.Object_18.geometry" :material="materials.stolik" />
+    </TresGroup>
+</template>

src/plugins/eCommerce/components/roomup/sphere.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-29 15:57:09
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-29 16:41:15
+-->
+<template>
+    <Levioso :floatFactor="15" :speed="2">
+        <TresMesh castShadow :position="[0, 5, 0]">
+            <TresSphereGeometry />
+            <TresMeshBasicMaterial color="hotpink" :roughness="1" />
+        </TresMesh>
+    </Levioso>
+</template>
+
+<script lang="ts" setup>
+import { Levioso } from '@tresjs/cientos'
+</script>

src/plugins/eCommerce/components/stickerModel.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-04-17 17:50:53
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-04-17 18:55:53
+ * @LastEditTime: 2024-04-29 15:49:53
 -->
 <template>
     <suspense>

src/plugins/eCommerce/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-01-16 08:58:24
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-04-26 08:05:53
+ * @LastEditTime: 2024-04-29 15:38:23
  */
 
 export default {
@@ -52,5 +52,12 @@ export default {
             title: '桌面陈设',
             referenceSource: { title: 'react-three-fiber', url: 'https://codesandbox.io/p/sandbox/caustics-szj6p7' },
         },
+        {
+            src: 'plugins/eCommerce/preview/roomup.png',
+            type: 'img',
+            name: 'roomup',
+            title: '日式会厅',
+            referenceSource: { title: 'react-three-fiber', url: 'https://codesandbox.io/p/sandbox/room-with-soft-shadows-ykfpw' },
+        },
     ],
 }

src/plugins/eCommerce/pages/roomup.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-29 15:38:34
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-29 17:14:57
+-->
+<template>
+    <loading />
+    <TresCanvas v-bind="tcConfig">
+        <TresPerspectiveCamera :position="[5, 2, 10]" :fov="45" :near="0.1" :far="1000" />
+        <OrbitControls enableDamping />
+        <TresAmbientLight :intensity="2" />
+        <Levioso>
+            <TresDirectionalLight ref="dLight" :position="[5, 5, -8]" castShadow :intensity="5" :shadow-mapSize="2048" :shadow-bias="-0.001" />
+        </Levioso>
+        <Suspense>
+            <roomMesh :scale="0.5" :position="[0, -1, 0]" />
+        </Suspense>
+
+        <sphere :position="[0, 5, -8]" />
+        <sphere :position="[2, 4, -8]" :scale="0.9" />
+        <sphere :position="[-2, 2, -8]" :scale="0.8" />
+
+        <Pcss v-bind="pcssConfig" />
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { randomLoading as loading } from 'PLS/UIdemo'
+import * as THREE from 'three'
+import { ref, watch, reactive } from 'vue'
+import { OrbitControls, Levioso } from '@tresjs/cientos'
+
+import roomMesh from '../components/roomup/roomMesh.vue'
+import sphere from '../components/roomup/sphere.vue'
+import { Pcss } from 'PLS/basic'
+import { Pane } from 'tweakpane'
+
+const dLight = ref(null)
+watch(dLight, (newVal: any) => {
+    if (newVal) {
+        newVal.shadow.camera = new THREE.OrthographicCamera(-8.5, 8.5, 8.5, -8.5, 0.1, 20)
+    }
+})
+
+const tcConfig = {
+    clearColor: '#d0d0d0',
+    windowSize: true,
+    toneMapping: THREE.ACESFilmicToneMapping,
+    toneMappingExposure: 0.8,
+    shadows: true,
+}
+
+const pcssConfig = reactive({
+    enabled: true,
+    size: 25,
+    focus: 0,
+    samples: 10,
+})
+const paneControl = new Pane({ title: '参数' })
+paneControl.addBinding(pcssConfig, 'enabled', {
+    label: '开启PCSS',
+})
+paneControl.addBinding(pcssConfig, 'size', {
+    label: 'size',
+    min: 1,
+    max: 100,
+    step: 1,
+})
+paneControl.addBinding(pcssConfig, 'focus', {
+    label: 'focus',
+    min: 0,
+    max: 2,
+    step: 0.1,
+})
+paneControl.addBinding(pcssConfig, 'samples', {
+    label: 'samples',
+    min: 1,
+    max: 20,
+    step: 1,
+})
+</script>