·
This commit is contained in:
parent
80cb8d0d69
commit
6d442ed30b
11
.gitignore
vendored
11
.gitignore
vendored
@ -1,14 +1,3 @@
|
||||
# ---> Vue
|
||||
# gitignore template for Vue.js projects
|
||||
#
|
||||
# Recommended template: Node.gitignore
|
||||
|
||||
# TODO: where does this rule come from?
|
||||
docs/_book
|
||||
|
||||
# TODO: where does this rule come from?
|
||||
test/
|
||||
|
||||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>3D案例</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1541
package-lock.json
generated
Normal file
1541
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
package.json
Normal file
26
package.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "xysite",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babylonjs/core": "^7.54.0",
|
||||
"vant": "^4.9.18",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.13.10",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"less": "^4.2.2",
|
||||
"typescript": "~5.7.2",
|
||||
"vite": "^6.2.0",
|
||||
"vue-tsc": "^2.2.4"
|
||||
}
|
||||
}
|
||||
BIN
public/img/flare.png
Normal file
BIN
public/img/flare.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
32
src/App.vue
Normal file
32
src/App.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
// import HelloWorld from './pages/helloworld/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue" />
|
||||
-->
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
</style>
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
0
src/components/helloworld/HelloWorld.less
Normal file
0
src/components/helloworld/HelloWorld.less
Normal file
14
src/components/helloworld/HelloWorld.ts
Normal file
14
src/components/helloworld/HelloWorld.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'HelloWorld',
|
||||
// setup(props, context) {
|
||||
setup() {
|
||||
// const renderCanvasRef = ref<HTMLCanvasElement>()
|
||||
// const isPopupViewChangeOption = ref(false)
|
||||
// const buttonsColorStatus = ref<Array<boolean>>([true, false, false, false])
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
})
|
||||
40
src/components/helloworld/HelloWorld.vue
Normal file
40
src/components/helloworld/HelloWorld.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<script lang="ts">
|
||||
import helloWorld from './HelloWorld'
|
||||
export default helloWorld
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1></h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button">count is</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style src="./HelloWorld.less" scoped></style>
|
||||
21
src/main.ts
Normal file
21
src/main.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
|
||||
import router from './router'
|
||||
|
||||
// 1. 引入你需要的Vant组件
|
||||
import * as vant from 'vant'
|
||||
// 2. 引入Vant组件样式
|
||||
import 'vant/lib/index.css'
|
||||
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.use(vant)
|
||||
|
||||
app.mount('#app')
|
||||
182
src/pages/index/Index.less
Normal file
182
src/pages/index/Index.less
Normal file
@ -0,0 +1,182 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #fff;
|
||||
background-color: #121212;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav {
|
||||
background-color: rgba(30, 30, 30, 0.9);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
padding: 1rem 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav__list {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav__item {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav__link:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* 3D 场景容器 */
|
||||
.canvas3d {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 主视觉区域 */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hero__subtitle {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hero__btn {
|
||||
background-color: #007aff;
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
transition: background-color 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hero__btn:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* 特色介绍区域 */
|
||||
.features {
|
||||
position: relative;
|
||||
padding: 5rem 0;
|
||||
text-align: center;
|
||||
background-color: rgba(30, 30, 30, 0.9);
|
||||
color: #fff;
|
||||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 3rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.features__list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.features__item {
|
||||
width: 300px;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.features__icon {
|
||||
font-size: 3rem;
|
||||
color: #007aff;
|
||||
margin-bottom: 1rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.features__item-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.features__item-description {
|
||||
color: #aaa;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 底部区域 */
|
||||
.footer {
|
||||
background-color: rgba(30, 30, 30, 0.9);
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer__text {
|
||||
color: #aaa;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
.nav__list {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav__item {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero__subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.features__item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
211
src/pages/index/Index.ts
Normal file
211
src/pages/index/Index.ts
Normal file
@ -0,0 +1,211 @@
|
||||
import { defineComponent, onMounted, ref } from 'vue'
|
||||
import * as BABYLON from '@babylonjs/core/Legacy/legacy'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Index',
|
||||
// setup(props, context) {
|
||||
setup() {
|
||||
const canvas3d = ref<HTMLCanvasElement>()
|
||||
// const isPopupViewChangeOption = ref(false)
|
||||
// const buttonsColorStatus = ref<Array<boolean>>([true, false, false, false])
|
||||
|
||||
const init = () => {
|
||||
// 创建引擎
|
||||
const engine = new BABYLON.Engine(canvas3d.value!, true);
|
||||
|
||||
// 创建场景
|
||||
const createScene = function () {
|
||||
const scene = new BABYLON.Scene(engine);
|
||||
// 设置场景背景色为暗色系
|
||||
scene.clearColor = BABYLON.Color4.FromHexString("#121212ff");
|
||||
|
||||
// 创建相机
|
||||
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 5, new BABYLON.Vector3(0, 0, 0), scene);
|
||||
camera.attachControl(canvas3d, true);
|
||||
|
||||
// 创建光源
|
||||
new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
|
||||
|
||||
|
||||
// 定义顶点着色器
|
||||
const vertexShader = `
|
||||
precision highp float;
|
||||
|
||||
// Attributes
|
||||
attribute vec3 position;
|
||||
attribute vec2 uv;
|
||||
|
||||
// Uniforms
|
||||
uniform mat4 worldViewProjection;
|
||||
|
||||
// Varying
|
||||
varying vec2 vUV;
|
||||
|
||||
void main(void) {
|
||||
gl_Position = worldViewProjection * vec4(position, 1.0);
|
||||
vUV = uv;
|
||||
}
|
||||
`;
|
||||
|
||||
// 定义片段着色器
|
||||
const fragmentShader = `
|
||||
precision highp float;
|
||||
|
||||
// Varying
|
||||
varying vec2 vUV;
|
||||
|
||||
// Uniforms
|
||||
uniform float time;
|
||||
|
||||
void main(void) {
|
||||
// 计算流光效果
|
||||
float wave = sin(vUV.x * 10.0 + time * 2.0);
|
||||
float glow = (wave + 1.0) * 0.5;
|
||||
|
||||
// 基础颜色（半透明蓝色）
|
||||
vec4 baseColor = vec4(0.0, 0.2, 0.8, 0.5);
|
||||
|
||||
// 应用流光效果
|
||||
vec4 finalColor = baseColor + vec4(glow, glow, glow, 0.0);
|
||||
|
||||
gl_FragColor = finalColor;
|
||||
}
|
||||
`;
|
||||
|
||||
const customMaterial = new BABYLON.ShaderMaterial("customShader", scene, {
|
||||
vertexSource: vertexShader,
|
||||
fragmentSource: fragmentShader,
|
||||
}, {
|
||||
attributes: ["position", "uv"],
|
||||
uniforms: ["worldViewProjection", "time"]
|
||||
});
|
||||
|
||||
// 设置材质透明度
|
||||
customMaterial.alpha = 0.95;
|
||||
|
||||
// 创建更扁平、更小的莫比乌斯环
|
||||
const mobius = BABYLON.MeshBuilder.CreateTorusKnot("mobius", {
|
||||
radius: 0.3,
|
||||
tube: 0.05,
|
||||
radialSegments: 128,
|
||||
tubularSegments: 128,
|
||||
p: 2,
|
||||
q: 3
|
||||
}, scene);
|
||||
mobius.position.y = 1;
|
||||
// 将材质应用到莫比乌斯环
|
||||
mobius.material = customMaterial;
|
||||
|
||||
// 将时间变量传递给着色器
|
||||
let time = 0;
|
||||
scene.registerBeforeRender(() => {
|
||||
customMaterial.setFloat("time", time);
|
||||
time += 0.01;
|
||||
});
|
||||
|
||||
// 创建点光源
|
||||
const pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 2, 2), scene);
|
||||
pointLight.diffuse = new BABYLON.Color3(1, 1, 1);
|
||||
pointLight.specular = new BABYLON.Color3(1, 1, 1);
|
||||
|
||||
// 让点光源围绕莫比乌斯环旋转
|
||||
scene.registerBeforeRender(() => {
|
||||
mobius.rotation.y += 0.01;
|
||||
const angle = performance.now() * 0.001;
|
||||
pointLight.position = new BABYLON.Vector3(
|
||||
Math.cos(angle) * 2,
|
||||
2,
|
||||
Math.sin(angle) * 2
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
// 创建星空粒子系统
|
||||
const starSystem = new BABYLON.ParticleSystem("starSystem", 10000, scene);
|
||||
starSystem.particleTexture = new BABYLON.Texture("./img/flare.png", scene);
|
||||
starSystem.emitter = new BABYLON.Vector3(0, 0, 0);
|
||||
starSystem.minEmitBox = new BABYLON.Vector3(-100, -100, -100);
|
||||
starSystem.maxEmitBox = new BABYLON.Vector3(100, 100, 100);
|
||||
starSystem.color1 = new BABYLON.Color4(1, 1, 1, 1);
|
||||
starSystem.color2 = new BABYLON.Color4(1, 1, 1, 1);
|
||||
starSystem.colorDead = new BABYLON.Color4(1, 1, 1, 0);
|
||||
starSystem.minSize = 0.05;
|
||||
starSystem.maxSize = 0.2;
|
||||
starSystem.minLifeTime = 1;
|
||||
starSystem.maxLifeTime = 3;
|
||||
starSystem.emitRate = 1000;
|
||||
starSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
|
||||
starSystem.gravity = new BABYLON.Vector3(0, 0, 0);
|
||||
starSystem.direction1 = new BABYLON.Vector3(-1, -1, -1);
|
||||
starSystem.direction2 = new BABYLON.Vector3(1, 1, 1);
|
||||
starSystem.minAngularSpeed = 0;
|
||||
starSystem.maxAngularSpeed = Math.PI;
|
||||
starSystem.minEmitPower = 1;
|
||||
starSystem.maxEmitPower = 3;
|
||||
starSystem.updateSpeed = 0.01;
|
||||
|
||||
// 启动星空粒子系统
|
||||
starSystem.start();
|
||||
|
||||
// 应用材质到莫比乌斯环
|
||||
// mobius.material = customMaterial;
|
||||
|
||||
|
||||
|
||||
// starSystem.updateFunction = (particles) => {
|
||||
// const center = mobius.position;
|
||||
// for (let i = 0; i < particles.length; i++) {
|
||||
// const particle = particles[i];
|
||||
// const distance = BABYLON.Vector3.Distance(particle.position, center);
|
||||
// const angle = Math.atan2(particle.position.z - center.z, particle.position.x - center.x);
|
||||
// const newAngle = angle + 0.01;
|
||||
// particle.position.x = center.x + distance * Math.cos(newAngle);
|
||||
// particle.position.z = center.z + distance * Math.sin(newAngle);
|
||||
// }
|
||||
// };
|
||||
|
||||
// // 添加后处理效果
|
||||
// const defaultPipeline = new BABYLON.DefaultRenderingPipeline(
|
||||
// "defaultPipeline",
|
||||
// true, // 是否启用HDR
|
||||
// scene,
|
||||
// [scene.activeCamera!], // 应用到的相机
|
||||
// true
|
||||
// )
|
||||
|
||||
// defaultPipeline.bloomEnabled = false//!isMobile // 启用泛光效果
|
||||
// defaultPipeline.bloomThreshold = 0.9 // 泛光阈值
|
||||
// defaultPipeline.bloomWeight = 0.3 // 泛光权重
|
||||
// defaultPipeline.bloomKernel = 64 // 泛光内核大小
|
||||
// defaultPipeline.bloomScale = 0.5 // 泛光缩放
|
||||
|
||||
// defaultPipeline.glowLayerEnabled = true
|
||||
// defaultPipeline.glowLayer!.intensity = 1.2//isMobile ? 0.7 : 0.66
|
||||
|
||||
// defaultPipeline.imageProcessingEnabled = false
|
||||
|
||||
return scene;
|
||||
};
|
||||
|
||||
const scene = createScene();
|
||||
|
||||
// 渲染循环
|
||||
engine.runRenderLoop(function () {
|
||||
scene.render();
|
||||
});
|
||||
|
||||
// 响应式处理，当窗口大小改变时更新引擎
|
||||
window.addEventListener('resize', function () {
|
||||
engine.resize();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
return {
|
||||
canvas3d
|
||||
}
|
||||
}
|
||||
})
|
||||
58
src/pages/index/Index.vue
Normal file
58
src/pages/index/Index.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
import index from './Index'
|
||||
export default index
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item"><a href="#" class="nav__link">首页</a></li>
|
||||
<li class="nav__item"><a href="#" class="nav__link">案例介绍</a></li>
|
||||
<li class="nav__item"><a href="#" class="nav__link">技术亮点</a></li>
|
||||
<li class="nav__item"><a href="#" class="nav__link">联系我们</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- 3D 场景容器 -->
|
||||
<canvas class="canvas3d" ref="canvas3d"></canvas>
|
||||
|
||||
<!-- 主视觉区域 -->
|
||||
<section class="hero">
|
||||
<h1 class="hero__title">3D 展示主题</h1>
|
||||
<p class="hero__subtitle">探索精彩的 3D 世界</p>
|
||||
<a href="#" class="hero__btn">了解更多</a>
|
||||
</section>
|
||||
|
||||
<!-- 特色介绍区域 -->
|
||||
<section class="features">
|
||||
<h2 class="features__title">3D 展示特色</h2>
|
||||
<div class="features__list">
|
||||
<div class="features__item">
|
||||
<i class="features__icon">🚀</i>
|
||||
<h3 class="features__item-title">沉浸式体验</h3>
|
||||
<p class="features__item-description">通过 3D 技术，带来身临其境的视觉享受。</p>
|
||||
</div>
|
||||
<div class="features__item">
|
||||
<i class="features__icon">🌟</i>
|
||||
<h3 class="features__item-title">逼真效果</h3>
|
||||
<p class="features__item-description">呈现逼真的 3D 模型和场景。</p>
|
||||
</div>
|
||||
<div class="features__item">
|
||||
<i class="features__icon">🛡️</i>
|
||||
<h3 class="features__item-title">互动性强</h3>
|
||||
<p class="features__item-description">支持用户与 3D 内容进行互动。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 底部区域 -->
|
||||
<footer class="footer">
|
||||
<p class="footer__text">版权所有 © 3D 展示主题 保留所有权利</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style src="./Index.less" scoped></style>
|
||||
24
src/router/index.ts
Normal file
24
src/router/index.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
// import { defineAsyncComponent, markRaw } from 'vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
component:
|
||||
// markRaw(
|
||||
// defineAsyncComponent(() => import('@/components/3d/show360/ShowObject360.vue'))
|
||||
// ) //当前显示的组件
|
||||
() => import('@/pages/index/Index.vue')
|
||||
},
|
||||
// {
|
||||
// path: '/',
|
||||
// name: 'vrroom',
|
||||
// component: () => import('@/components/3d/vrroom/ShowVrRoom.vue')
|
||||
// }
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
79
src/style.css
Normal file
79
src/style.css
Normal file
@ -0,0 +1,79 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
21
tsconfig.app.json
Normal file
21
tsconfig.app.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"incremental": true, // 启用增量编译
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
// "noUncheckedSideEffectImports": true
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
25
tsconfig.node.json
Normal file
25
tsconfig.node.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"incremental": true, // 启用增量编译
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
// "noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
14
vite.config.ts
Normal file
14
vite.config.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
base: "./",
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user