mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-19 01:36:38 +08:00
change index page background
This commit is contained in:
RockYang
parent
514dd6c76a
commit
74b1b07b31
BIN
web/src/assets/img/ai-bg-02.png
Normal file
BIN
web/src/assets/img/ai-bg-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
BIN
web/src/assets/img/ai-bg.jpg
Normal file
BIN
web/src/assets/img/ai-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user