From 65bfa203472373638e407778c6af06b38f666ad3 Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期四, 30 五月 2024 15:01:06 +0800
Subject: [PATCH] 添加threejs
---
src/views/home-page/index.vue | 127 ++++++++++++++++++++++++++++++++++++++----
1 files changed, 115 insertions(+), 12 deletions(-)
diff --git a/src/views/home-page/index.vue b/src/views/home-page/index.vue
index 945ff21..f6615c8 100644
--- a/src/views/home-page/index.vue
+++ b/src/views/home-page/index.vue
@@ -1,21 +1,124 @@
<script setup lang="ts">
-import {ref} from "vue";
+import {onMounted} from "vue";
+import * as THREE from 'three';
+import UserAPI from "@/api/user";
+import type {Mesh,Camera, Scene, WebGLRenderer} from "three";
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import stoolGlb from '@/assets/3d/stool.glb';
const edit = ref('plus');
+const threeRef = ref<HTMLElement|null>(null);
+async function getUserList() {
+ try {
+ const rs = await UserAPI.getUserList();
+ console.log(rs);
+ }catch (e) {
+ console.log(e);
+ }
+}
+
+async function userLogin() {
+ try {
+ const rs = await UserAPI.login({
+ username: '闇嶄笢浼�',
+ password: '123456',
+ });
+ console.log(rs);
+ }catch (e) {
+ console.log(e);
+ }
+}
+
+let camera:Camera, scene:Scene, mesh:Mesh, renderer:WebGLRenderer, loader;
+
+function animation( time:number ) {
+
+ mesh.rotation.x = time / 2000;
+ mesh.rotation.y = time / 1000;
+
+ renderer.render( scene, camera );
+
+}
+
+onMounted(()=>{
+ const width = (threeRef.value as HTMLElement).offsetWidth, height = (threeRef.value as HTMLElement).offsetHeight;
+ camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
+ camera.position.z = 1;
+
+ scene = new THREE.Scene();
+
+ const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
+ const material = new THREE.MeshNormalMaterial();
+
+ mesh = new THREE.Mesh( geometry, material );
+ // scene.add( mesh );
+
+ const loader = new GLTFLoader();
+ loader.load(stoolGlb, function (gltf) {
+ scene.add(gltf.scene);
+ // 鍙互鍦ㄨ繖閲屾坊鍔犳洿澶氶�昏緫锛屾瘮濡傝缃ā鍨嬩綅缃�佹棆杞瓑
+ }, function (xhr) {
+ console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+ }, function (error) {
+ console.error('An error happened', error);
+ });
+
+ const ambientLight = new THREE.AmbientLight(0x404040); // 鏌斿拰鐨勭櫧鑹插厜
+ scene.add(ambientLight);
+
+ // 娣诲姞瀹氬悜鍏�
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+ directionalLight.position.set(-1, 2, 4).normalize();
+ scene.add(directionalLight);
+
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
+ renderer.setSize( width, height );
+ renderer.render( scene, camera );
+ renderer.setAnimationLoop( animation );
+
+ const controls = new OrbitControls(camera, renderer.domElement);
+ controls.enableZoom = true;
+ (threeRef.value as HTMLElement).appendChild( renderer.domElement );
+});
</script>
<template>
- <el-button type="primary">123</el-button>
- <el-tag>123</el-tag>
- <el-table></el-table>
- <el-icon>
- <component :is="edit"></component>
- </el-icon>
- <el-icon>
- <component :is="edit"></component>
- </el-icon>
+ <div class="page-root-container">
+ <el-container>
+ <el-header></el-header>
+ <el-main>
+ <div ref="threeRef" style="height:600px">
+
+ </div>
+ <el-button type="primary" @click="userLogin">123</el-button>
+ <el-tag>123</el-tag>
+ <el-table></el-table>
+ <el-icon>
+ <component :is="edit"></component>
+ </el-icon>
+ <el-icon>
+ <component :is="edit"></component>
+ </el-icon>
+ <div class="page-container">
+ <div class="page-content"></div>
+ </div>
+ <div class="icon-item">
+ <svg-icon icon-class="api" size="40px"></svg-icon>
+ </div>
+ </el-main>
+ </el-container>
+ </div>
</template>
-<style scoped>
-
+<style scoped lang="less">
+.page-root-container {
+ height: 100vh;
+}
+.page-container {
+ .page-content {
+ height: 200px;
+ background-color: #FF0000;
+ }
+}
</style>
--
Gitblit v1.9.1