添加threejs

longyvfengyun

2024-05-30 65bfa203472373638e407778c6af06b38f666ad3

 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>