mirror of
https://gitee.com/ice-gl/icegl-three-vue-tres.git
synced 2025-04-05 06:22:43 +08:00
增加了 软阴影的实例 待优化
This commit is contained in:
hawk86104
parent
893ccbc826
commit
827ad35585
@ -1,3 +1,4 @@
|
||||
module.exports = {
|
||||
...require("@webank/eslint-config-webank/.prettierrc.js")
|
||||
...require("@webank/eslint-config-webank/.prettierrc.js"),
|
||||
semi:false
|
||||
};
|
||||
@ -83,8 +83,12 @@ export async function useEnvironment(options: Partial<EnvironmentOptions>, fbo:
|
||||
|
||||
watch(() => [background.value, texture.value], ([_background, _texture]) => {
|
||||
if (scene.value) {
|
||||
let bTexture = fbo?.value? fbo.value.texture : _texture
|
||||
scene.value.background = _background ? bTexture : undefined as unknown as Texture
|
||||
let bTexture = fbo?.value ? fbo.value.texture : _texture
|
||||
let backBackground = scene.value.background
|
||||
if (!backBackground?.isColor) {
|
||||
backBackground = undefined as unknown as Texture
|
||||
}
|
||||
scene.value.background = _background ? bTexture : backBackground
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-12-25 11:41:13
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-15 09:54:01
|
||||
* @LastEditTime: 2024-04-18 11:21:44
|
||||
-->
|
||||
<template>
|
||||
<TresGroup :scale="props.scale">
|
||||
@ -25,7 +25,7 @@ const props = withDefaults(defineProps<{
|
||||
showGridHelper?: boolean
|
||||
scale?: Number
|
||||
ignoreObjects?: THREE.Object3D[]
|
||||
size: Array<number>
|
||||
size?: Array<number>
|
||||
}>(), {
|
||||
reflectivity: 0.8,
|
||||
scale: 1.0,
|
||||
|
||||
@ -0,0 +1,149 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-04-18 11:23:10
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-19 09:35:34
|
||||
-->
|
||||
<template>
|
||||
<!-- <TresMesh receive-shadow ref="gPlane" :scale="10" :rotate-x="-Math.PI / 2">
|
||||
<TresPlaneGeometry :args="[1, 1]" />
|
||||
<TresSoftShadowMaterial v-bind="ssConfig" />
|
||||
</TresMesh> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as THREE from 'three'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useTresContext, useRenderLoop } from '@tresjs/core'
|
||||
import { ProgressiveLightMap, SoftShadowMaterial } from '@pmndrs/vanilla'
|
||||
|
||||
let gPlane = null
|
||||
|
||||
const { extend, scene, renderer, camera } = useTresContext()
|
||||
debugger
|
||||
extend({ SoftShadowMaterial })
|
||||
|
||||
const plm = new ProgressiveLightMap(renderer.value, scene.value, 1024)
|
||||
|
||||
const ssConfig = {
|
||||
map: plm.progressiveLightMap2.texture,
|
||||
transparent: true,
|
||||
depthWrite: false,
|
||||
toneMapped: true,
|
||||
blend: 40, // ColorBlend, how much colors turn to black, 0 is black, 2
|
||||
alphaTest: 0.75,
|
||||
opacity: 0.8,
|
||||
}
|
||||
const shadowMaterial = new SoftShadowMaterial({
|
||||
map: plm.progressiveLightMap2.texture,
|
||||
transparent: true,
|
||||
depthWrite: false,
|
||||
toneMapped: true,
|
||||
blend: 40,
|
||||
alphaTest: 0.8,
|
||||
})
|
||||
gPlane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1).rotateX(-Math.PI / 2), shadowMaterial)
|
||||
gPlane.scale.setScalar(10)
|
||||
gPlane.receiveShadow = true
|
||||
debugger
|
||||
scene.value.add(gPlane)
|
||||
plm.configure(gPlane)
|
||||
plm.clear()
|
||||
const lightParams = {
|
||||
/** Light position */
|
||||
position: new THREE.Vector3(3, 5, 3),
|
||||
/** Radius of the jiggle, higher values make softer light */
|
||||
radius: 1,
|
||||
/** Amount of lights*/
|
||||
amount: 8,
|
||||
/** Light intensity */
|
||||
intensity: parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 155 ? Math.PI : 1,
|
||||
/** Ambient occlusion, lower values mean less AO, hight more, you can mix AO and directional light */
|
||||
ambient: 0.5,
|
||||
bias: 0.001, //shadow bias
|
||||
mapSize: 1024, // shadow map res
|
||||
size: 8, // shadow camera top,bottom,left,right
|
||||
near: 0.5, // shadow camera near
|
||||
far: 200, // shadow camera far
|
||||
}
|
||||
const gLights = new THREE.Group()
|
||||
for (let l = 0; l < lightParams.amount; l++) {
|
||||
const dirLight = new THREE.DirectionalLight(0xffffff, lightParams.intensity / lightParams.amount)
|
||||
dirLight.castShadow = true
|
||||
dirLight.shadow.bias = lightParams.bias
|
||||
dirLight.shadow.camera.near = lightParams.near
|
||||
dirLight.shadow.camera.far = lightParams.far
|
||||
dirLight.shadow.camera.right = lightParams.size / 2
|
||||
dirLight.shadow.camera.left = -lightParams.size / 2
|
||||
dirLight.shadow.camera.top = lightParams.size / 2
|
||||
dirLight.shadow.camera.bottom = -lightParams.size / 2
|
||||
dirLight.shadow.mapSize.width = lightParams.mapSize
|
||||
dirLight.shadow.mapSize.height = lightParams.mapSize
|
||||
gLights.add(dirLight)
|
||||
}
|
||||
|
||||
const randomiseLightPositions = () => {
|
||||
const vLength = lightParams.position.length()
|
||||
for (let i = 0; i < gLights.children.length; i++) {
|
||||
const light = gLights.children[i]
|
||||
if (Math.random() > lightParams.ambient) {
|
||||
light.position.set(
|
||||
lightParams.position.x + THREE.MathUtils.randFloatSpread(lightParams.radius),
|
||||
lightParams.position.y + THREE.MathUtils.randFloatSpread(lightParams.radius),
|
||||
lightParams.position.z + THREE.MathUtils.randFloatSpread(lightParams.radius),
|
||||
)
|
||||
} else {
|
||||
let lambda = Math.acos(2 * Math.random() - 1) - Math.PI / 2.0
|
||||
let phi = 2 * Math.PI * Math.random()
|
||||
light.position.set(Math.cos(lambda) * Math.cos(phi) * vLength, Math.abs(Math.cos(lambda) * Math.sin(phi) * vLength), Math.sin(lambda) * vLength)
|
||||
}
|
||||
}
|
||||
}
|
||||
const renderShadows = (frames = 1) => {
|
||||
// shadowMaterial
|
||||
// debugger
|
||||
shadowMaterial.opacity = 1.0
|
||||
shadowMaterial.alphaTest = 0.8
|
||||
scene.value.add(gLights)
|
||||
plm.prepare()
|
||||
for (let i = 0; i < frames; i++) {
|
||||
randomiseLightPositions()
|
||||
plm.update(camera.value as THREE.Camera, 40)
|
||||
}
|
||||
scene.value.remove(gLights)
|
||||
plm.finish()
|
||||
}
|
||||
let count = 0
|
||||
// watch(
|
||||
// () => gPlane.value,
|
||||
// (value) => {
|
||||
// if (value) {
|
||||
// plm.configure(value)
|
||||
// console.log('plm.configure(value)')
|
||||
// // renderShadows()
|
||||
// debugger
|
||||
// }
|
||||
// },
|
||||
// )
|
||||
watch(
|
||||
() => gPlane.value,
|
||||
(value) => {
|
||||
if (value) {
|
||||
plm.configure(value)
|
||||
console.log('plm.configure(value)')
|
||||
// renderShadows()
|
||||
debugger
|
||||
}
|
||||
},
|
||||
)
|
||||
const { onLoop } = useRenderLoop() //onAfterLoop
|
||||
onLoop(() => {
|
||||
if (gPlane && count++ < 40) {
|
||||
renderShadows()
|
||||
console.log('renderShadows')
|
||||
}
|
||||
// renderShadows()
|
||||
})
|
||||
</script>
|
||||
23
src/plugins/projectionShadow/config.js
Normal file
23
src/plugins/projectionShadow/config.js
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-04-18 10:22:49
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-18 10:26:56
|
||||
*/
|
||||
export default {
|
||||
"name": "projectionShadow",
|
||||
"title": "投射阴影",
|
||||
"intro": "这里集合了 投射阴影 场景",
|
||||
"version": "0.0.1",
|
||||
"author": "地虎降天龙",
|
||||
"website": "https://gitee.com/hawk86104",
|
||||
"state": "active",
|
||||
"creatTime": "2024-04-18",
|
||||
"updateTime": "2024-04-18",
|
||||
"require": [],
|
||||
"preview": [
|
||||
{ "src": "plugins/basic/base/preview/theBasic.png", "type": "img", "name": "accumulativeShadows", "title": "软阴影" },
|
||||
]
|
||||
}
|
||||
80
src/plugins/projectionShadow/pages/accumulativeShadows.vue
Normal file
80
src/plugins/projectionShadow/pages/accumulativeShadows.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-04-18 10:22:49
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-19 09:24:55
|
||||
-->
|
||||
<template>
|
||||
<TresCanvas v-bind="state" ref="tcRef" window-size>
|
||||
<TresPerspectiveCamera :position="[2, 3, 4]" :fov="45" :near="1" :far="1000" />
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
|
||||
<TresMesh :position="[2, 0.5, -1.5]" receive-shadow cast-shadow name="sphere">
|
||||
<TresSphereGeometry :args="[0.5]" />
|
||||
<TresMeshStandardMaterial :color="0xffffff * Math.random()" :roughness="0" :metalness="1" />
|
||||
</TresMesh>
|
||||
|
||||
<TresMesh :position="[-1.5, 0.5, 1.5]" receive-shadow cast-shadow name="cube">
|
||||
<TresCylinderGeometry :args="[0.5, 0.5, 1]" />
|
||||
<TresMeshStandardMaterial :color="0xffffff * Math.random()" :roughness="0.3" :metalness="0" />
|
||||
</TresMesh>
|
||||
|
||||
<TresMesh :position="[0, 0.9, 0]" receive-shadow cast-shadow name="torus">
|
||||
<TresTorusKnotGeometry :args="[0.5, 0.2, 80, 64]" />
|
||||
<TresMeshStandardMaterial :color="0xffffff * Math.random()" :roughness="0.3" :metalness="0" />
|
||||
</TresMesh>
|
||||
|
||||
<accumulativeShadowsCom />
|
||||
|
||||
<Suspense>
|
||||
<Environment
|
||||
:files="['pos-x.jpg', 'neg-x.jpg', 'pos-y.jpg', 'neg-y.jpg', 'pos-z.jpg', 'neg-z.jpg']"
|
||||
path="https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/6jpg/"
|
||||
/>
|
||||
</Suspense>
|
||||
<!-- <TresGridHelper /> -->
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ACESFilmicToneMapping, Color, EquirectangularReflectionMapping } from 'three'
|
||||
import { reactive, onMounted, watchEffect, shallowRef } from 'vue'
|
||||
import { TresCanvas, useRenderLoop } from '@tresjs/core'
|
||||
import { OrbitControls } from '@tresjs/cientos'
|
||||
import { Environment } from 'PLS/basic'
|
||||
import accumulativeShadowsCom from '../components/accumulativeShadowsCom.vue'
|
||||
|
||||
const state = reactive({
|
||||
// clearColor: '#eeeeee',
|
||||
alpha: true,
|
||||
shadows: true,
|
||||
shadowMap: true,
|
||||
// shadowMapType: BasicShadowMap,
|
||||
// outputColorSpace: SRGBColorSpace,
|
||||
toneMapping: ACESFilmicToneMapping,
|
||||
// disableRender: true,
|
||||
})
|
||||
|
||||
const controlsState = reactive({
|
||||
enableDamping: true,
|
||||
autoRotate: false,
|
||||
})
|
||||
|
||||
const tcRef = shallowRef()
|
||||
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(({ elapsed }) => {})
|
||||
watchEffect(() => {
|
||||
if (tcRef.value) {
|
||||
const scene = tcRef.value.context.scene.value
|
||||
scene.background = new Color('grey')
|
||||
}
|
||||
// if (tcRef.value?.context?.scene?.value?.environment) {
|
||||
// debugger
|
||||
// tcRef.value.context.scene.value.environment.mapping = EquirectangularReflectionMapping
|
||||
// }
|
||||
})
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user