xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-07 01:33:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

change index page background

Browse Source
This commit is contained in:
RockYang
2024-04-25 18:54:33 +08:00
parent 514dd6c76a
commit 74b1b07b31
3 changed files with 69 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
web/src/views/Index.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="index-page" :style="{height: winHeight+'px'}">
<div class="bg"></div>
<div class="menu-box">
<el-menu
mode="horizontal"
@@ -46,7 +47,7 @@
<i class="iconfont icon-xmind"></i>
<span>思维导图</span>
</el-button>
<div id="animation-container"></div>
<!-- <div id="animation-container"></div>-->
</div>
<div class="footer">
@@ -57,7 +58,7 @@
<script setup>
import * as THREE from 'three';
// import * as THREE from 'three';
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
@@ -69,7 +70,7 @@ const router = useRouter()
const title = ref("Geek-AI 创作系统")
const logo = ref("/images/logo.png")
const slogan = ref("我辈之人，先干为敬，陪您先把 AI 用起来")
const size = Math.max(window.innerWidth * 0.5, window.innerHeight * 0.8)
// const size = Math.max(window.innerWidth * 0.5, window.innerHeight * 0.8)
const winHeight = window.innerHeight - 150
onMounted(() => {
@@ -83,59 +84,59 @@ onMounted(() => {
})
const init = () => {
// 创建场景
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
camera.position.z = 3.88;
// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(size, size);
renderer.setClearColor(0x000000, 0);
const container = document.getElementById('animation-container');
container.appendChild(renderer.domElement);
// 加载地球纹理
const loader = new THREE.TextureLoader();
loader.load(
'/images/land_ocean_ice_cloud_2048.jpg',
function (texture) {
// 创建地球球体
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhongMaterial({
map: texture,
bumpMap: texture, // 使用同一张纹理作为凹凸贴图
bumpScale: 0.05, // 调整凹凸贴图的影响程度
specularMap: texture, // 高光贴图
specular: new THREE.Color('#007bff'), // 高光颜色
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);
// 添加环境光和点光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 0.8);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
// 创建动画
const animate = function () {
requestAnimationFrame(animate);
// 使地球自转和公转
earth.rotation.y += 0.0006;
renderer.render(scene, camera);
};
// 执行动画
animate();
}
);
// // 创建场景
// // 创建场景
// const scene = new THREE.Scene();
//
// // 创建相机
// const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
// camera.position.z = 3.88;
//
// // 创建渲染器
// const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
// renderer.setSize(size, size);
// renderer.setClearColor(0x000000, 0);
// const container = document.getElementById('animation-container');
// container.appendChild(renderer.domElement);
//
// // 加载地球纹理
// const loader = new THREE.TextureLoader();
// loader.load(
// '/images/land_ocean_ice_cloud_2048.jpg',
// function (texture) {
// // 创建地球球体
// const geometry = new THREE.SphereGeometry(1, 32, 32);
// const material = new THREE.MeshPhongMaterial({
// map: texture,
// bumpMap: texture, // 使用同一张纹理作为凹凸贴图
// bumpScale: 0.05, // 调整凹凸贴图的影响程度
// specularMap: texture, // 高光贴图
// specular: new THREE.Color('#01193B'), // 高光颜色
// });
// const earth = new THREE.Mesh(geometry, material);
// scene.add(earth);
//
// // 添加环境光和点光源
// const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
// scene.add(ambientLight);
// const pointLight = new THREE.PointLight(0xffffff, 0.8);
// pointLight.position.set(5, 5, 5);
// scene.add(pointLight);
//
// // 创建动画
// const animate = function () {
// requestAnimationFrame(animate);
//
// // 使地球自转和公转
// earth.rotation.y += 0.0006;
//
// renderer.render(scene, camera);
// };
//
// // 执行动画
// animate();
// }
// );
}
</script>
@@ -143,7 +144,6 @@ const init = () => {
@import '@/assets/iconfont/iconfont.css'
.index-page {
margin: 0
background-color #007bff /* 科技蓝色背景 */
overflow hidden
color #ffffff
display flex
@@ -151,6 +151,18 @@ const init = () => {
align-items baseline
padding-top 150px
.bg {
position absolute
top 0
left 0
width 100vw
height 100vh
background-image url("~@/assets/img/ai-bg.jpg")
//filter: blur(8px);
background-size: cover;
background-position: center;
}
.menu-box {
position absolute
top 0