Three.js--》穿越虚拟门槛打造的3D登录界面

原创

已于 2024-04-23 09:46:24 修改 · 2.2k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #vue #前端 #three.js

于 2024-04-15 22:21:52 首次发布

今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

源码下载地址：地址

在线体验地址：地址

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖即可。接下来对项目进行一些初始化操作：

重置默认样式：在项目中我们都会用到一些标签，但是这些标签可能本身自带一些默认样式，这些默认样式可能会影响我们的排版布局，如果每次引用就去清除一遍默认样式有点太过繁琐，因此这里需要我们清除一下默认样式。执行如下命令安装第三方包：

npm install reset.css --save

配置scss预处理器：SASS是一种预编译的CSS，作用类似于Less，这里我们在vue项目中采用该预处理器进行处理样式，终端执行如下命令安装相应的插件：

npm install sass

配置element-plus组件库：因为本项目需要采用 element-plus 组件库进行创建项目，其官方地址为：element-plus ，所以接下来需要对组件库进行一个安装配置，具体的实现过程如下，终端执行如下安装命令：

npm install element-plus @element-plus/icons-vue

安装完成之后，在入口文件main.js对element的插件进行一个挂载，这里顺便配置一下国家化：

import { createApp } from 'vue'
import 'reset.css'
import App from './App.vue'
import ElementPlus from 'element-plus' // 引入element-plus插件与样式
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
createApp(App)
    .use(ElementPlus, { locale: zhCn }) // 安装element-plus插件并进行国际化配置
    .mount('#app')

路由配置：因为本项目主要展示的是3D场景的登陆页面，所有这里也是需要配置一些路由的，先我们要先创建几个路由作为路由模块，在src目录下新建一个pages文件夹，其用于存放路由组件相关的内容，如下：

不清楚vue路由的使用，推荐看一下我之前讲解过的文章：Vue 3 路由进阶接下来正式开始配置项目的路由，首先终端执行如下命令安装vue路由：

npm i vue-router

安装完插件之后，接下来就可以对路由进行相关配置了，在src，目录下新建router文件，如下：

import { createRouter, createWebHistory } from "vue-router"
 
const routes = [
    {
        path: '/', 
        redirect: '/index', // 重定向
    },
    {
        path: '/index',
        name: 'home',
        component: () => import('../pages/home/index.vue'),
        meta: {
            title: '首页'
        }
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('../pages/login/index.vue'),
        meta: {
            title: '登录页'
        }
    }
]
 
// createRouter用于创建路由器实例，可以管理多个路由
const router = createRouter({
    // 路由的模式的设置
    history: createWebHistory(),
    routes
})
 
export default router

配置完路由组件之后，我们需要在入口文件 main.js 中进行引入安装，如下：

import { createApp } from 'vue'
import 'reset.css'
import App from './App.vue'
import router from './router' // 引入路由组件
import ElementPlus from 'element-plus' // 引入element-plus插件与样式
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
createApp(App)
    .use(router) // 安装路由插件
    .use(ElementPlus, { locale: zhCn }) // 安装element-plus插件并进行国际化配置
    .mount('#app')

安装完成之后，我们需要设置一下路由的出口位置，接下来只需要在根组件App.vue设置出口即可