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
14cd3fc463
commit
05b7978faa
@ -4,21 +4,35 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-12-26 09:31:40
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-12-26 16:41:08
|
||||
* @LastEditTime: 2024-12-27 11:26:28
|
||||
-->
|
||||
<template>
|
||||
<CustomShaderMaterial :baseMaterial="THREE.MeshPhongMaterial" :vertexShader="vertexShader" :fragmentShader="fragmentShader" :uniforms="uniforms" />
|
||||
<CustomShaderMaterial :baseMaterial="baseMaterial" :vertexShader="vertexShader" :fragmentShader="fragmentShader" :uniforms="uniforms" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { useRenderLoop } from '@tresjs/core'
|
||||
import { CustomShaderMaterial } from '@tresjs/cientos'
|
||||
import fragmentShader from '../shaders/hexGridMaterial.frag'
|
||||
|
||||
const props = defineProps({
|
||||
cutSectionColor: {
|
||||
default: '#aaff11',
|
||||
},
|
||||
baseMaterial: {
|
||||
default: new THREE.MeshPhongMaterial(),
|
||||
},
|
||||
speed: {
|
||||
default: 1.0,
|
||||
},
|
||||
gridWeight: {
|
||||
default: 0.03,
|
||||
},
|
||||
raisedBottom: { default: 0.05 },
|
||||
waveFrequency: { default: 0.2 },
|
||||
wavePow: { default: 4.0 },
|
||||
division: { default: 32.0 },
|
||||
divisionScaleX: { default: 1.0 },
|
||||
direction: { default: 4 }, // vertical: 4, horizontal: 3, radial: 5
|
||||
isReversed: { default: false },
|
||||
})
|
||||
|
||||
const vertexShader = `
|
||||
@ -27,17 +41,36 @@ void main() {
|
||||
uvPosition = uv;
|
||||
}
|
||||
`
|
||||
|
||||
const uniforms = {
|
||||
cutSectionColor: {
|
||||
value: new THREE.Color(props.cutSectionColor),
|
||||
},
|
||||
}
|
||||
gridWeight: { value: props.gridWeight },
|
||||
raisedBottom: { value: props.raisedBottom },
|
||||
waveFrequency: { value: props.waveFrequency },
|
||||
wavePow: { value: props.wavePow },
|
||||
direction: { value: props.direction },
|
||||
isReversed: { value: props.isReversed },
|
||||
hasMaskTexture: { value: false },
|
||||
maskTexture: { value: null },
|
||||
division: { value: props.division },
|
||||
divisionScaleX: { value: props.divisionScaleX },
|
||||
time: { value: 0.0 },
|
||||
} as any
|
||||
|
||||
watch(
|
||||
() => props.cutSectionColor,
|
||||
(cutSectionColor) => {
|
||||
uniforms.cutSectionColor.value.set(cutSectionColor)
|
||||
},
|
||||
() => [props.gridWeight, props.raisedBottom, props.waveFrequency, props.wavePow, props.division, props.divisionScaleX, props.direction, props.isReversed],
|
||||
([gridWeight, raisedBottom, waveFrequency, wavePow, division, divisionScaleX, direction, isReversed]) => {
|
||||
uniforms.gridWeight.value = gridWeight
|
||||
uniforms.raisedBottom.value = raisedBottom
|
||||
uniforms.waveFrequency.value = waveFrequency
|
||||
uniforms.wavePow.value = wavePow
|
||||
uniforms.division.value = division
|
||||
uniforms.divisionScaleX.value = divisionScaleX
|
||||
uniforms.direction.value = direction
|
||||
uniforms.isReversed.value = isReversed
|
||||
},
|
||||
)
|
||||
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(({ delta }) => {
|
||||
uniforms.time.value += delta * props.speed
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -4,14 +4,18 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-12-26 15:55:05
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-12-26 16:54:48
|
||||
* @LastEditTime: 2024-12-27 11:03:47
|
||||
-->
|
||||
<template>
|
||||
<TresMesh>
|
||||
<TresSphereGeometry :args="[1, 48, 24]" />
|
||||
<hexGridMaterial />
|
||||
<hexGridMaterial :baseMaterial="baseMaterial" v-bind="$attrs" />
|
||||
</TresMesh>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as THREE from 'three'
|
||||
import hexGridMaterial from './hexGridMaterial.vue'
|
||||
|
||||
const baseMaterial = new THREE.MeshPhongMaterial() // MeshBasicMaterial MeshPhongMaterial
|
||||
|
||||
</script>
|
||||
|
||||
@ -4,21 +4,22 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-12-26 15:54:59
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-12-26 16:31:15
|
||||
* @LastEditTime: 2024-12-27 11:28:28
|
||||
-->
|
||||
<template>
|
||||
<TresCanvas clearColor="#666666" window-size>
|
||||
<TresPerspectiveCamera :position="[3, 3, 0]" :fov="45" :near="0.1" :far="10000" />
|
||||
<OrbitControls enableDamping autoRotate />
|
||||
<TresCanvas clearColor="#666666" window-size>
|
||||
<TresPerspectiveCamera :position="[3, 3, 0]" :fov="45" :near="0.1" :far="10000" />
|
||||
<OrbitControls enableDamping autoRotate />
|
||||
<TresAmbientLight :intensity="1.0" />
|
||||
<TresPointLight color="#0000ff" :position="[0, 0, -3]" :intensity="100" />
|
||||
<Suspense>
|
||||
<hexGridMesh v-bind="configState" />
|
||||
</Suspense>
|
||||
|
||||
<Suspense>
|
||||
<hexGridMesh v-bind="configState" />
|
||||
</Suspense>
|
||||
|
||||
<Suspense>
|
||||
<reflectorDUDV :position="[0, -0.5, 0]" v-bind="reflectorState" />
|
||||
</Suspense>
|
||||
</TresCanvas>
|
||||
<Suspense>
|
||||
<reflectorDUDV :position="[0, -0.5, 0]" v-bind="reflectorState" />
|
||||
</Suspense>
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -30,31 +31,77 @@ import reflectorDUDV from '../components/reflectorDUDV.vue'
|
||||
import hexGridMesh from '../components/hexGridMesh.vue'
|
||||
|
||||
const reflectorState = reactive({
|
||||
reflectivity: 0.1,
|
||||
showGridHelper: false,
|
||||
scale: 1,
|
||||
reflectivity: 0.1,
|
||||
showGridHelper: false,
|
||||
scale: 1,
|
||||
})
|
||||
const configState = reactive({
|
||||
color: '#de62f2',
|
||||
speed: 0.8,
|
||||
size: 10,
|
||||
color: '#de62f2',
|
||||
speed: 1.2,
|
||||
gridWeight: 0.03,
|
||||
raisedBottom: 0.05,
|
||||
waveFrequency: 0.2,
|
||||
wavePow: 4.0,
|
||||
division: 32.0,
|
||||
divisionScaleX: 1.0,
|
||||
isReversed: false,
|
||||
direction: 4,
|
||||
})
|
||||
|
||||
const paneControl = new Pane({
|
||||
title: 'digitalGround',
|
||||
expanded: true,
|
||||
title: 'digitalGround',
|
||||
expanded: true,
|
||||
})
|
||||
paneControl.addBinding(configState, 'color', { label: '颜色' })
|
||||
paneControl.addBinding(configState, 'speed', {
|
||||
label: '速度',
|
||||
min: 0.1,
|
||||
max: 5.0,
|
||||
step: 0.1,
|
||||
label: '速度',
|
||||
min: -5.0,
|
||||
max: 5.0,
|
||||
step: 0.1,
|
||||
})
|
||||
paneControl.addBinding(configState, 'size', {
|
||||
label: '大小',
|
||||
min: 0.1,
|
||||
max: 20,
|
||||
step: 0.1,
|
||||
paneControl.addBinding(configState, 'gridWeight', {
|
||||
label: '网格宽度',
|
||||
min: 0.001,
|
||||
max: 0.5,
|
||||
step: 0.001,
|
||||
})
|
||||
paneControl.addBinding(configState, 'raisedBottom', {
|
||||
label: '渐变宽度',
|
||||
min: 0.001,
|
||||
max: 1,
|
||||
step: 0.001,
|
||||
})
|
||||
paneControl.addBinding(configState, 'waveFrequency', {
|
||||
label: '分段',
|
||||
min: 0.01,
|
||||
max: 2,
|
||||
step: 0.01,
|
||||
})
|
||||
paneControl.addBinding(configState, 'wavePow', {
|
||||
label: '渐变强度',
|
||||
min: 0.1,
|
||||
max: 10,
|
||||
step: 0.1,
|
||||
})
|
||||
paneControl.addBinding(configState, 'division', {
|
||||
label: '网格整体缩放',
|
||||
min: 0.1,
|
||||
max: 50,
|
||||
step: 0.1,
|
||||
})
|
||||
paneControl.addBinding(configState, 'divisionScaleX', {
|
||||
label: '网格横向缩放',
|
||||
min: 0.1,
|
||||
max: 10,
|
||||
step: 0.1,
|
||||
})
|
||||
paneControl.addBinding(configState, 'isReversed', {
|
||||
label: '颜色取反',
|
||||
})
|
||||
paneControl.addBinding(configState, 'direction', {
|
||||
label: '方向类别',
|
||||
min: 3,
|
||||
max: 5,
|
||||
step: 1,
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,25 +1,22 @@
|
||||
varying vec2 uvPosition;
|
||||
|
||||
// #include <time_animation_uniform_chunk>
|
||||
uniform float time;
|
||||
uniform bool isAnimate;
|
||||
// #include <wavy_animation_uniform_chunk>
|
||||
|
||||
uniform float raisedBottom;
|
||||
uniform float waveFrequency;
|
||||
uniform float wavePow;
|
||||
uniform int direction;
|
||||
// #include <repeat_pattern_uniform_chunk>
|
||||
|
||||
uniform float division;
|
||||
uniform float divisionScaleX;
|
||||
// #include <mask_map_uniform_chunk>
|
||||
|
||||
uniform bool hasMaskTexture;
|
||||
uniform sampler2D maskTexture;
|
||||
// #include <reversible_uniform_chunk>
|
||||
|
||||
uniform bool isReversed;
|
||||
|
||||
uniform float gridWeight;
|
||||
|
||||
// #include <hex_grid_function_chunk>
|
||||
float hexDist(vec2 p) {
|
||||
p = abs(p);
|
||||
float d = dot(p, normalize(vec2(1.0, 1.73)));
|
||||
@ -45,15 +42,12 @@ void main() {
|
||||
vec4 hc = hexCoords(uv);
|
||||
vec2 id = hc.zw;
|
||||
float distance = id.y;
|
||||
// if( direction == ${Directions.horizontal}){
|
||||
// distance = id.x;
|
||||
// }else if( direction == ${Directions.radial} ){
|
||||
// distance = length(id.xy);
|
||||
// }
|
||||
float wavy =
|
||||
isAnimate
|
||||
? pow(sin((distance * waveFrequency - time)), wavePow) + raisedBottom
|
||||
: 1.0;
|
||||
if (direction == 3) {
|
||||
distance = id.x;
|
||||
} else if (direction == 5) {
|
||||
distance = length(id.xy);
|
||||
}
|
||||
float wavy = pow(sin((distance * waveFrequency - time)), wavePow) + raisedBottom;
|
||||
|
||||
csm_DiffuseColor.a *= wavy;
|
||||
|
||||
@ -72,4 +66,9 @@ void main() {
|
||||
float gridLine = smoothstep(w, stepMax, hc.y);
|
||||
gridLine = isReversed ? 1.0 - gridLine : gridLine;
|
||||
csm_DiffuseColor.a *= gridLine;
|
||||
|
||||
// 重点：将透明度乘以颜色，以保持颜色的亮度 保留原有颜色，且不被 csm_FragColor 覆盖掉
|
||||
csm_DiffuseColor.rgb = vec3(csm_DiffuseColor.a * csm_DiffuseColor.r,
|
||||
csm_DiffuseColor.a * csm_DiffuseColor.g,
|
||||
csm_DiffuseColor.a * csm_DiffuseColor.b);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user