mirror of
https://gitee.com/ice-gl/icegl-three-vue-tres.git
synced 2025-04-05 06:22:43 +08:00
完成 yuriBrain 等待封装
This commit is contained in:
hawk86104
parent
ee2690667f
commit
607828e07a
96
src/plugins/medical/components/yuriBrain/brainParticles.vue
Normal file
96
src/plugins/medical/components/yuriBrain/brainParticles.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2025-01-09 10:29:37
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2025-01-09 11:37:54
|
||||
-->
|
||||
<template>
|
||||
<TresPoints :scale="10">
|
||||
<TresBufferGeometry ref="tbRef" :position="[positionArray, 3]" :randoms="[randomsArray, 1]" />
|
||||
<TresShaderMaterial v-bind="uniforms" />
|
||||
</TresPoints>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { useRenderLoop } from '@tresjs/core'
|
||||
import { randomRange } from './makeData'
|
||||
|
||||
const props = defineProps({
|
||||
brainCurves: { default: null, type: Array },
|
||||
})
|
||||
|
||||
const density = 10
|
||||
const numberOfPoints = density * props.brainCurves.length
|
||||
|
||||
const positionArray = new Float32Array(numberOfPoints * 3)
|
||||
for (let i = 0; i < numberOfPoints; i++) {
|
||||
positionArray[i * 3 + 0] = randomRange(-1, 1)
|
||||
positionArray[i * 3 + 1] = randomRange(-1, 1)
|
||||
positionArray[i * 3 + 2] = randomRange(-1, 1)
|
||||
}
|
||||
|
||||
const randomsArray = new Float32Array(numberOfPoints * 3)
|
||||
for (let i = 0; i < numberOfPoints; i++) {
|
||||
randomsArray[i] = randomRange(0.3, 1)
|
||||
}
|
||||
|
||||
const myPoints = [] as any
|
||||
for (let i = 0; i < props.brainCurves.length; i++) {
|
||||
for (let j = 0; j < density; j++) {
|
||||
myPoints.push({
|
||||
currentOffset: Math.random(),
|
||||
speed: Math.random() * 0.01,
|
||||
curve: props.brainCurves[i],
|
||||
curPosition: Math.random(),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const tbRef = ref<THREE.BufferGeometry | null>(null)
|
||||
|
||||
const uniforms = {
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
attribute float randoms;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
|
||||
gl_PointSize = randoms*66. * (1. / -mvPosition.z);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
void main() {
|
||||
float disc = length(gl_PointCoord.xy - vec2(0.5));
|
||||
float opacity = 0.3*smoothstep(0.5,0.4,disc);
|
||||
gl_FragColor = vec4(vec3(opacity),1.);
|
||||
}
|
||||
`,
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
blending: THREE.AdditiveBlending,
|
||||
}
|
||||
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(() => {
|
||||
if (tbRef.value) {
|
||||
let curpositions = tbRef.value.attributes.position.array
|
||||
for (let i = 0; i < myPoints.length; i++) {
|
||||
myPoints[i].curPosition += myPoints[i].speed
|
||||
myPoints[i].curPosition = myPoints[i].curPosition % 1
|
||||
|
||||
let curPoint = myPoints[i].curve.getPointAt(myPoints[i].curPosition)
|
||||
|
||||
curpositions[i * 3] = curPoint.x
|
||||
curpositions[i * 3 + 1] = curPoint.y
|
||||
curpositions[i * 3 + 2] = curPoint.z
|
||||
}
|
||||
tbRef.value.attributes.position.needsUpdate = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
15316
src/plugins/medical/components/yuriBrain/data.js
Normal file
15316
src/plugins/medical/components/yuriBrain/data.js
Normal file
File diff suppressed because it is too large
Load Diff
14
src/plugins/medical/components/yuriBrain/index.vue
Normal file
14
src/plugins/medical/components/yuriBrain/index.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<TresGroup>
|
||||
<brainParticles :brainCurves="brainCurves" />
|
||||
<tubes :brainCurves="brainCurves" />
|
||||
</TresGroup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getBrainCurves } from './makeData'
|
||||
import brainParticles from './brainParticles.vue'
|
||||
import tubes from './tubes.vue'
|
||||
|
||||
const brainCurves = getBrainCurves() as any
|
||||
</script>
|
||||
33
src/plugins/medical/components/yuriBrain/makeData.js
Normal file
33
src/plugins/medical/components/yuriBrain/makeData.js
Normal file
@ -0,0 +1,33 @@
|
||||
import * as THREE from 'three'
|
||||
import { data } from './data'
|
||||
|
||||
export const randomRange = (min, max) => Math.random() * (max - min) + min
|
||||
// const curves = []
|
||||
// for (let i = 0; i < 100; i++){
|
||||
// const points = []
|
||||
// const length = randomRange(0.1, 1)
|
||||
// for (let j = 0; j < 100; j++) {
|
||||
// points.push(new THREE.Vector3().setFromSphericalCoords(
|
||||
// 1,
|
||||
// Math.PI - (j / 100) * Math.PI*length,
|
||||
// (i / 100) * Math.PI * 2
|
||||
// )
|
||||
// )
|
||||
// }
|
||||
// const tempcurve = new THREE.CatmullRomCurve3(points)
|
||||
// curves.push(tempcurve)
|
||||
// }
|
||||
|
||||
export const getBrainCurves = () => {
|
||||
const brainCurves = []
|
||||
const PATHS = data.economics[0].paths
|
||||
PATHS.forEach((path) => {
|
||||
const points = []
|
||||
for (let i = 0; i < path.length; i += 3) {
|
||||
points.push(new THREE.Vector3(path[i], path[i + 1], path[i + 2]))
|
||||
}
|
||||
const tempcurve = new THREE.CatmullRomCurve3(points)
|
||||
brainCurves.push(tempcurve)
|
||||
})
|
||||
return brainCurves
|
||||
}
|
||||
83
src/plugins/medical/components/yuriBrain/tubes.vue
Normal file
83
src/plugins/medical/components/yuriBrain/tubes.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2025-01-09 11:13:03
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2025-01-09 12:26:23
|
||||
-->
|
||||
<template>
|
||||
<TresGroup :scale="10">
|
||||
<TresMesh v-for="curve in props.brainCurves" :key="curve.uuid">
|
||||
<TresTubeGeometry :args="[curve, 64, 0.001, 2, false]" />
|
||||
<TresShaderMaterial v-bind="tsmConfig" />
|
||||
</TresMesh>
|
||||
</TresGroup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as THREE from 'three'
|
||||
import { useRenderLoop } from '@tresjs/core'
|
||||
|
||||
const props = defineProps({
|
||||
brainCurves: { default: null, type: Array },
|
||||
}) as any
|
||||
|
||||
const tsmConfig = {
|
||||
uniforms: {
|
||||
time: { value: 0 },
|
||||
color: { value: new THREE.Color(0.1, 0.3, 0.6) },
|
||||
mouse: { value: new THREE.Vector3(0, 0, 0) },
|
||||
},
|
||||
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
uniform float time;
|
||||
uniform vec3 mouse;
|
||||
varying float vProgress;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
vProgress = smoothstep(-1.,1.,sin(vUv.x*8. + time*3.));
|
||||
|
||||
vec3 p = position;
|
||||
float maxDist = 0.05;
|
||||
float dist = length(mouse - p);
|
||||
if(dist < maxDist){
|
||||
vec3 dir = normalize(mouse - p);
|
||||
dir*= (1.-dist/maxDist);
|
||||
p -= dir*0.03;
|
||||
}
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
uniform float time;
|
||||
uniform vec3 color;
|
||||
varying vec2 vUv;
|
||||
varying float vProgress;
|
||||
void main() {
|
||||
vec3 finalColor = mix(color, color*0.25, vProgress);
|
||||
float hideCorners = smoothstep(1.,0.9,vUv.x);
|
||||
float hideCorners1 = smoothstep(0.,0.1,vUv.x);
|
||||
// gl_FragColor = vec4(vec3(vProgress),1.);
|
||||
gl_FragColor = vec4(finalColor,hideCorners*hideCorners1);
|
||||
}
|
||||
`,
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
side: THREE.DoubleSide,
|
||||
blending: THREE.AdditiveBlending,
|
||||
}
|
||||
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(({ elapsed }) => {
|
||||
tsmConfig.uniforms.time.value = elapsed
|
||||
})
|
||||
|
||||
window.addEventListener('mousemove', (event) => {
|
||||
tsmConfig.uniforms.mouse.value.x = event.clientX / window.innerWidth - 0.5
|
||||
tsmConfig.uniforms.mouse.value.y = -(event.clientY / window.innerHeight - 0.5)
|
||||
// console.log(tsmConfig.uniforms.mouse.value)
|
||||
})
|
||||
</script>
|
||||
@ -1,23 +1,30 @@
|
||||
/*
|
||||
* @Description:
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-11-10 16:11:27
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2023-12-26 16:14:53
|
||||
* @LastEditTime: 2025-01-09 11:35:21
|
||||
*/
|
||||
|
||||
export default {
|
||||
"name": "medical",
|
||||
"title": "医疗行业",
|
||||
"intro": "医疗行业数字化例子",
|
||||
"version": "0.0.1",
|
||||
"author": "地虎降天龙",
|
||||
"website": "https://gitee.com/hawk86104",
|
||||
"state": "active",
|
||||
"require": [],
|
||||
"preview": [
|
||||
{ "src": "plugins/medical/preview/digitalBrain.png", "type": "img", "name": "digitalBrain", "title": "数字大脑" },
|
||||
{ "src": "plugins/medical/preview/digitalBrainFloor.png", "type": "img", "name": "digitalBrainFloor", "title": "数字大脑镜面" },
|
||||
]
|
||||
}
|
||||
name: 'medical',
|
||||
title: '医疗行业',
|
||||
intro: '医疗行业数字化例子',
|
||||
version: '0.0.1',
|
||||
author: '地虎降天龙',
|
||||
website: 'https://gitee.com/hawk86104',
|
||||
state: 'active',
|
||||
require: [],
|
||||
preview: [
|
||||
{ src: 'plugins/medical/preview/digitalBrain.png', type: 'img', name: 'digitalBrain', title: '数字大脑' },
|
||||
{ src: 'plugins/medical/preview/digitalBrainFloor.png', type: 'img', name: 'digitalBrainFloor', title: '数字大脑镜面' },
|
||||
{
|
||||
src: 'plugins/medical/preview/yuriBrain.png',
|
||||
type: 'img',
|
||||
name: 'yuriBrain',
|
||||
title: "Yuri's大脑",
|
||||
referenceSource: { title: 'Yuri Artiukh', url: 'https://www.youtube.com/watch?v=OCjwL5QbiMg' },
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
34
src/plugins/medical/pages/yuriBrain.vue
Normal file
34
src/plugins/medical/pages/yuriBrain.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2025-01-09 10:24:46
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2025-01-09 12:29:28
|
||||
-->
|
||||
<template>
|
||||
<TresCanvas clearColor="#000" window-size>
|
||||
<TresPerspectiveCamera :position="[6, 3, 0]" :fov="45" :near="0.1" :far="10000" />
|
||||
<OrbitControls enableDamping autoRotate />
|
||||
|
||||
<yuriBrainModel />
|
||||
|
||||
<Suspense>
|
||||
<reflectorDUDV :position="[0, -1.36, 0]" v-bind="reflectorState" />
|
||||
</Suspense>
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import { OrbitControls } from '@tresjs/cientos'
|
||||
import { reflectorDUDV } from 'PLS/floor'
|
||||
import yuriBrainModel from '../components/yuriBrain/index.vue'
|
||||
|
||||
const reflectorState = reactive({
|
||||
reflectivity: 0.8,
|
||||
showGridHelper: false,
|
||||
scale: 1,
|
||||
})
|
||||
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user