JayChou
4 months ago
parent
e01e5bddc4
commit
132ea41f5b
8 changed files with 506 additions and 139 deletions
|
After Width: | Height: | Size: 52 KiB |
@ -0,0 +1,155 @@ |
|||||||
|
<template> |
||||||
|
<div :id="'3d-graph' + props.index"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
// import { useRouter } from 'vue-router' |
||||||
|
import { onMounted, ref,reactive } from 'vue' |
||||||
|
import ForceGraph3D from '3d-force-graph' |
||||||
|
//@ts-ignore |
||||||
|
import { CSS2DRenderer, CSS2DObject,} from 'three/examples/jsm/renderers/CSS2DRenderer.js' |
||||||
|
//@ts-ignore |
||||||
|
import SpriteText from '../../professionalProfile/spritetext' |
||||||
|
// const $router = useRouter() |
||||||
|
// const jsonData = ref(null) |
||||||
|
let Graph = reactive({}) |
||||||
|
const props = defineProps({ |
||||||
|
width:{ |
||||||
|
type:Number, |
||||||
|
default:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, |
||||||
|
}, |
||||||
|
height:{ |
||||||
|
type:Number, |
||||||
|
default:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, |
||||||
|
}, |
||||||
|
index:{ |
||||||
|
type:Number, |
||||||
|
required:true |
||||||
|
} |
||||||
|
}) |
||||||
|
const dom = ref(null) |
||||||
|
onMounted(() => { |
||||||
|
|
||||||
|
|
||||||
|
Graph = ForceGraph3D({ |
||||||
|
extraRenderers: [new CSS2DRenderer()], |
||||||
|
})(document.getElementById('3d-graph' + props.index) as HTMLElement) |
||||||
|
.jsonUrl('../../../public/data.json') |
||||||
|
// .nodeAutoColorBy('group') |
||||||
|
.nodeThreeObject((node: any) => { |
||||||
|
const nodeEl = document.createElement('div') |
||||||
|
nodeEl.textContent = node.label |
||||||
|
nodeEl.style.color = '#333333' |
||||||
|
nodeEl.style.borderRadius = '50%' |
||||||
|
// console.log(node, 111, Graph.graphData().nodes) |
||||||
|
return new CSS2DObject(nodeEl) |
||||||
|
}) |
||||||
|
.linkLabel((link:any) => link.label) // 指定链接上显示的文字属性 |
||||||
|
.linkWidth(0.8) |
||||||
|
.linkHoverPrecision(0.5) // 设置链接文字的显示精度，这里设置为一个足够小的值 |
||||||
|
.linkColor(() => '#dd92fd') // 设置连接线颜色为红色 |
||||||
|
.backgroundColor('#f5f6fd') |
||||||
|
.width(props.width) |
||||||
|
.height(props.height) |
||||||
|
.linkThreeObjectExtend(true) |
||||||
|
.nodeColor((node: any) => { |
||||||
|
return node.color |
||||||
|
}) |
||||||
|
.nodeRelSize(7) // 设置节点的相对大小为4 |
||||||
|
.nodeResolution(20) |
||||||
|
.linkDirectionalArrowLength(3) // 设置连接线箭头长度为3 |
||||||
|
.linkDirectionalArrowRelPos(1) // 设置连接线箭头位置为连接线末端 |
||||||
|
.nodeThreeObjectExtend(true) |
||||||
|
.onNodeClick((node: any) => { |
||||||
|
// Aim at node from outside it |
||||||
|
// 目标距离 |
||||||
|
const targetDistance = 200 // 设定一个一般的距离 |
||||||
|
|
||||||
|
// 计算相机新位置 |
||||||
|
const distRatio = 1 + targetDistance / Math.hypot(node.x, node.y, node.z) |
||||||
|
const newPos = { |
||||||
|
x: node.x * distRatio, |
||||||
|
y: node.y * distRatio, |
||||||
|
z: node.z * distRatio, |
||||||
|
} |
||||||
|
|
||||||
|
// 如果节点位于原点，则特殊处理 |
||||||
|
if (node.x === 0 && node.y === 0 && node.z === 0) { |
||||||
|
newPos.z = targetDistance // 将 z 轴设定为目标距离 |
||||||
|
} |
||||||
|
|
||||||
|
// 移动相机至新位置 |
||||||
|
//@ts-ignore |
||||||
|
Graph.cameraPosition( |
||||||
|
newPos, // 新位置 |
||||||
|
node, // 视角焦点 |
||||||
|
3000, // 过渡时长 |
||||||
|
) |
||||||
|
|
||||||
|
// 获取图表数据 |
||||||
|
//@ts-ignore |
||||||
|
const graphData = Graph.graphData() |
||||||
|
|
||||||
|
// 遍历连接线，检查每条连接线的起点和终点是否与当前点击的节点相关联 |
||||||
|
graphData.links.forEach((link: any) => { |
||||||
|
// console.log(link); |
||||||
|
|
||||||
|
if (link.source.id === node.id || link.target.id === node.id) { |
||||||
|
setLabel() |
||||||
|
// 将与当前点击节点相关联的连接线颜色设置为红色 |
||||||
|
// link.color = '#FF0000' // 设置连接线颜色为红色 |
||||||
|
//@ts-ignore |
||||||
|
Graph.linkColor((item: any): any => { |
||||||
|
if (item.source.id === node.id || item.target.id === node.id) { |
||||||
|
return 'red' |
||||||
|
} else { |
||||||
|
return '#dd92fd' |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
} else { |
||||||
|
// Graph.linkColor(() => '#a4c7fe') // 设置连接线颜色为红色 |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// 更新图形数据，以应用颜色变化 |
||||||
|
//@ts-ignore |
||||||
|
Graph.graphData(graphData) |
||||||
|
}) |
||||||
|
dom.value = document.querySelector('canvas') as any |
||||||
|
}) |
||||||
|
|
||||||
|
const setLabel = () => { |
||||||
|
//@ts-ignore |
||||||
|
Graph.linkThreeObject((link:any) => { |
||||||
|
// extend link with text sprite |
||||||
|
const sprite = new SpriteText(`${link.label}`); |
||||||
|
sprite.color = '#ccc'; |
||||||
|
sprite.textHeight = 1.5; |
||||||
|
return sprite; |
||||||
|
}) |
||||||
|
//@ts-ignore |
||||||
|
Graph.linkPositionUpdate((sprite, { start, end }) => { |
||||||
|
//@ts-ignore |
||||||
|
const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({ |
||||||
|
//@ts-ignore |
||||||
|
[c]: start[c] + (end[c] - start[c]) / 2 // calc middle point |
||||||
|
}))); |
||||||
|
|
||||||
|
// Position sprite |
||||||
|
Object.assign(sprite.position, middlePos); |
||||||
|
}); |
||||||
|
//@ts-ignore |
||||||
|
Graph.d3Force('charge').strength(-120); |
||||||
|
} |
||||||
|
// const goToEditAtlas = () => { |
||||||
|
// console.log(jsonData.value) |
||||||
|
|
||||||
|
// $router.push({ name: 'EditAtlas', params: { id: 123 } }) |
||||||
|
// } |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='scss' scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<template> |
||||||
|
<div class="view-container"> |
||||||
|
<div class="banner"></div> |
||||||
|
<div class="container"> |
||||||
|
<div class="top-video-box"> |
||||||
|
<div class="video"> |
||||||
|
<video id="video" width="100%" height="100%" controls> |
||||||
|
<source src="../../assets//videos/920b6703c5f95b9ff774f27abf5d4f29.mp4" type="video/mp4" /> |
||||||
|
您的浏览器不支持视频播放 |
||||||
|
</video> |
||||||
|
</div> |
||||||
|
<div class="info-list"></div> |
||||||
|
</div> |
||||||
|
<div class="title-container"> |
||||||
|
<div class="title">课程体系</div> |
||||||
|
<div class="description"> |
||||||
|
全面落实立德树人根本任务，CDIO工程教育理念 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import {} from 'vue' |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.view-container { |
||||||
|
height: 5000px; |
||||||
|
// background-color: #2080f7; |
||||||
|
.container { |
||||||
|
width: $base-container-width; |
||||||
|
margin: 0 auto; |
||||||
|
padding-top: 300px; |
||||||
|
.top-video-box { |
||||||
|
position: absolute; |
||||||
|
top: 120px; |
||||||
|
display: flex; |
||||||
|
height: 545px; |
||||||
|
justify-content: space-between; |
||||||
|
.video { |
||||||
|
width: 1073px; |
||||||
|
height: 100%; |
||||||
|
background-color: #d9d9d9; |
||||||
|
#video{ |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
} |
||||||
|
.info-list { |
||||||
|
margin-left: 20px; |
||||||
|
width: 519px; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.title-container { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
height: 300px; |
||||||
|
.title { |
||||||
|
color: #333333; |
||||||
|
font-size: 42px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.description { |
||||||
|
margin-top: 30px; |
||||||
|
color: #777777; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.banner { |
||||||
|
width: 100%; |
||||||
|
height: 410px; |
||||||
|
background: url('../../assets/images/banner2.png') no-repeat; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue