<script setup lang="ts">
|
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>
|
<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 lang="less">
|
.page-root-container {
|
height: 100vh;
|
}
|
.page-container {
|
.page-content {
|
height: 200px;
|
background-color: #FF0000;
|
}
|
}
|
</style>
|
