Threejs | 导入三维模型（vue3）

npm install three

import * as THREE from "three";

// 创建场景
  let scene = new THREE.Scene();
  // 创建透视相机
  let camera = new THREE.PerspectiveCamera(
    45, // 摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示。默认值是50。
    window.innerWidth / window.innerHeight, // 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高
    0.1, // 摄像机的近端面，默认值是0.1。
    2000 // 摄像机的远端面，默认值是2000。
  );
  camera.position.set(0, 0, 3);
  // 创建渲染器
  let renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 将画布添加到页面中
  screenDom.value.appendChild(renderer.domElement);

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

// 设置解压缩的加载器
  let dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("./draco/gltf/");
  dracoLoader.setDecoderConfig({ type: "js" });
  let loader = new GLTFLoader();
  loader.setDRACOLoader(dracoLoader);
  loader.load("./files/gltf/Soldier.glb", (gltf) => {
    gltf.scene.scale.set(0.5, 0.5, 0.5);
    gltf.scene.position.set(0, -0.4, 0);
    gltf.scene.rotation.set(0, Math.PI, 0);
    scene.add(gltf.scene);
  });

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 控制器 可以使得相机围绕目标进行轨道运动
  let controls = new OrbitControls(camera, renderer.domElement);

<template>
  <div class="home">
    <div class="canvas-container" ref="screenDom"></div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
let screenDom = ref(null);
onMounted(() => {
  // 创建场景
  let scene = new THREE.Scene();
  // 创建透视相机
  let camera = new THREE.PerspectiveCamera(
    45, // 摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示。默认值是50。
    window.innerWidth / window.innerHeight, // 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高
    0.1, // 摄像机的近端面，默认值是0.1。
    2000 // 摄像机的远端面，默认值是2000。
  );
  camera.position.set(0, 0, 3);
  // 创建渲染器
  let renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 将画布添加到页面中
  screenDom.value.appendChild(renderer.domElement);
  // 控制器 可以使得相机围绕目标进行轨道运动
  let controls = new OrbitControls(camera, renderer.domElement);
  function render() {
    requestAnimationFrame(render);
    controls.update();
    renderer.render(scene, camera);
  }
  render();
  // 添加灯光
  let light = new THREE.DirectionalLight('#fff', 1);
  light.position.set(0, 0.5, 3);
  scene.add(light);
  let light2 = new THREE.DirectionalLight('#fff', 0.5);
  light2.position.set(0, 0, -1);
  scene.add(light2);
  let light3 = new THREE.AmbientLight('#fff', 0.5);
  light3.position.set(-1, 1, 1);
  scene.add(light3);
  let light4 = new THREE.AmbientLight('#fff', 1);
  light4.position.set(-1, -1, 1);
  scene.add(light4);
  // 设置解压缩的加载器
  let dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("./draco/gltf/");
  dracoLoader.setDecoderConfig({ type: "js" });
  let loader = new GLTFLoader();
  loader.setDRACOLoader(dracoLoader);
  loader.load("./files/gltf/Soldier.glb", (gltf) => {
    gltf.scene.scale.set(0.5, 0.5, 0.5);
    gltf.scene.position.set(0, -0.4, 0);
    gltf.scene.rotation.set(0, Math.PI, 0);
    scene.add(gltf.scene);
  });
  
});
</script>
<style>
body {
  background: #fff;
}
</style>