vue + threejs实战，实现3D 360度 旋转查看物体

 一.  官方文档
        地址：three.js

二.   简介

    threejs是JavaScript编写的 WebGL 第三方库，提供了非常多的3D显示功能。它是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括摄像机，光影，材质等各种对象。

三.   npm安装

$ npm install three --save-dev

四.   代码实例

前提：提前准备好 .glb（3D格式文件） 和 .hdr（High-Dynamic Range：高动态范围的缩写-用于渲染场景） 格式文件，可以网上下载

1. 可以再utils文件下编写一个Base3d.js的工具包

import * as THREE from "three";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; // 色调渲染器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 轨道控制器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; // 文件格式加载器

class Base3d {
    constructor(selector) {
        this.container = document.querySelector(selector)
        this.camera; // 摄像机
        this.scene; // 场景
        this.renderer; // 渲染器
        this.init(); // 初始化
        this.animate(); // 动画不断渲染
    }

    // 初始化
    init() {
        this.initScene(); // 场景
        this.initCamera(); // 摄像机
        this.initRenderer(); // 渲染器
        this.initControls(); // 轨道控制器(放在渲染器后面)
        this.addMesh(); // 添加物体
        window.addEventListener('resize', this.onWindowReset.bind(this))
    }

    // 初始化场景
    initScene() {
        this.scene = new THREE.Scene();
        this.setEnvMap('yejing.hdr');
    }

    // 初始化摄像机
    initCamera() {
        // 透视相机
        this.camera = new THREE.PerspectiveCamera(
            45,
            window.innerWidth / window.innerHeight,
            1,
            1000
        );
        // 相机3维坐标
        this.camera.position.set(-8.5, 0.6, 2.7);
    }

    // 初始化渲染器
    initRenderer() {
        // 渲染器-抗锯齿
        this.renderer = new THREE.WebGLRenderer({ antialias: true });

        // 设置像素比(定义为浏览器的缩放比)
        this.renderer.setPixelRatio(window.devicePixelRatio);

        // 设置渲染器尺寸大小
        this.renderer.setSize(window.innerWidth, window.innerHeight);

        // 绘制输出一个 canvas
        this.container.appendChild(this.renderer.domElement);
    }

    // 环境纹理设置
    setEnvMap(hdr) {
        new RGBELoader().setPath('./files/hdr/').load(hdr, (texture) => {
            // 映射场景（球状体里面）
            texture.mapping = THREE.EquirectangularRefractionMapping;

            // 色调映射-电影级别
            this.renderer.toneMapping = THREE.ACESFilmicToneMapping;

            // 色调映射的曝光级别
            this.renderer.toneMappingExposure = 3;

            // 场景背景添加纹理
            this.scene.background = texture;
            // 场景环境添加纹理
            this.scene.environment = texture;
        });
    }

    // 渲染函数
    render() {
        // 用相机渲染一个场景
        this.renderer.render(this.scene, this.camera)
    }

    // 动画
    animate() {
        // 每一帧都会调用此方法
        this.renderer.setAnimationLoop(this.render.bind(this))
    }

    // 轨道控制器
    initControls() {
        // this.camera是个object（必须）将要被控制的相机
        this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }

    // 设置模型（物体）
    setModel(modelName) {
        return new Promise(() => {
            const loader = new GLTFLoader().setPath('./files/glb/');
            loader.load(modelName, (gltf) => {
                console.info(gltf)
                const model = gltf.scene.children[0]; // 取屏幕的第一个子元素
                this.scene.add(model); // 给屏幕添加模型（即物体）
            })
        })
    }

    // 添加物体
    addMesh() {
        this.setModel('qiao.glb')
    }

    // 监听浏览器，做自适应渲染
    onWindowReset() {
        // 摄像机视椎体的长宽比
        this.camera.aspect = window.innerWidth / window.innerHeight;
        // 更新摄像机投影矩阵
        this.camera.updateProjectionMatrix();
        // 渲染器重新设置大小
        this.renderer.setSize(window.innerWidth, window.innerHeight);
    }
}

export default Base3d

2. 使用：在.vue文件中

<template>
  <div id="scene"></div>
</template>

<script>
import Base3d from "../utils/Base3d";

export default {
  name: "ThreeJS",
  data: () => ({
    base3d: {}
  }),
  mounted() {
    this.base3d = new Base3d('#scene')
  },
}
</script>

五.  效果展示