vue+threejs实现3D模型预览（包含模型缩放、平移、清晰度调整）

简介：因为最近工作需求涉及到threejs的开发，并且自己也一直想要学习和攻克这方面的知识，就通过自学之后记录下了这篇文章。这篇文章主要包含threejs的几个方面模型预览、环境贴图、模型的缩放、平移、打光、清晰度调整等方面。非常详细，有兴趣的同学可以收藏慢慢看！！！

一、threejs安装

通过npm或者yarn安装threejs库

npm install three or yarn add three

导入整个 three.js核心库

import * as THREE from 'three';

二、场景创建

html：

<template>
    <div ref="container"></div>
</template>

script：

const container = ref(null)

// 创建场景
const scene = new THREE.Scene();

// 创建相机
camera = new THREE.OrthographicCamera( 
    window.innerWidth / -10.5,
    window.innerWidth / 10.5,
    window.innerHeight / 10.5,
    window.innerHeight / - 10.5,
    0.1,
    1000
);// 这边设置的是OrthographicCamera解决模型近大远小的问题

// 相机位置
camera.position.z = 200; // 根据模型大小调整
camera.position.y = 0;
camera.position.x = 0;
camera.lookAt(0, 0, 0)

// 创建渲染器
renderer = new THREE.WebGLRenderer({ alpha: true }); // 设置背景为透明
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0);
container.value.appendChild(renderer.domElement);

// 如果需要添加环境贴图（添加背景环境）可以加上以下代码
// import { RGBELoader} from "three/examples/jsm/loaders/RGBELoader"
// let rgbeLoader = new RGBELoader();
// const rgbUrl = "xxxxx"; // 环境贴图hdr文件路径
// rgbeLoader.load(rgbUrl, envMap => {
//     // 设置球形贴图
//     envMap.mapping = THREE.EquirectangularReflectionMapping;
//     // 设置环境贴图
//     scene.background = envMap;
//     scene.environment = envMap;
// })

// 渲染场景
const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();

// 监听窗口缩放
window.addEventListener("resize", () => {
    renderer.setSize( window.innerWidth, window.innerHeight );
    camera.aspect = window.innerWidth / window.innerHeight;
    cam