threejs代码封装

本节课不讲解具体threejs知识点，就是封装threejs代码，创建一个类。

如果你前端编程基础比较好，你可以视频快进学习本节课，或者直接打开课件源码看下就行。

我主要照顾下部分编程基础比较薄弱同学，从零给大家演示下。

前端基础

如果你前端编程基础比较弱，可以搜搜下面相关的关键词，比如JavaScript面向对象、设计模式、es6，去补充学习下。

es6语法：类class

如果你完全不了解JavaScript es6语法类class，可以先去补充学习。

声明一个类。

class CreateTwin {
    constructor() {
        // 定义属性
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera();
        this.renderer = new THREE.WebGLRenderer();
    }
}    

实例化类,创建一个对象。

const twin = new CreateTwin();
twin.scene.add(mesh);//访问属性

创建一个类CreateTwin

在Vue项目文件src目录创建一个twin文件，后面用来存放threejs相关的封装代码。

src/twin目录下创建一个文件CreateTwin.js

CreateTwin.js文件代码

// CreateTwin.js文件代码
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
export default class CreateTwin {
    constructor() {
        // 场景
        this.scene = new THREE.Scene();
        // 相机
        const width = window.innerWidth;
        const height = window.innerHeight;
        this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 3000);
        this.camera.position.set(1.24, 7.03, 52.5);
        // 渲染器
        this.renderer = new THREE.WebGLRenderer({
            antialias: true,
            logarithmicDepthBuffer: true,
        });
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(width, height);
        document.body.appendChild(this.renderer.domElement);
        // gltf加载
        const draco = new DRACOLoader();
        draco.setDecoderPath('./draco/');
        this.loader = new GLTFLoader()
        this.loader.setDRACOLoader(draco)
        // 渲染循环
        this.renderer.setAnimationLoop(() => {
            this.renderer.render(this.scene, this.camera)
        })
        // 平行光
        this.directionalLight = new THREE.DirectionalLight(0xffffff, 3.0);
        this.directionalLight.position.set(80, 100, 50);
        this.scene.add(this.directionalLight);
        // 设置.envMap
        const rgbeLoader = new RGBELoader();
        rgbeLoader.load('./envMap.hdr', (envMap) => {
            this.scene.environment = envMap;
            envMap.mapping = THREE.EquirectangularReflectionMapping;
        })
        // 相机控件
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.target.set(0, 0, 0);
        this.controls.update();
        // 画布尺寸随着窗口变化
        window.addEventListener('resize',()=>{
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
        });
    }
}

components引入类

components中原来文件twin.js删除，新建一个空的twin.js文件。

twin.js里面代码

import CreateTwin from "../twin/CreateTwin";
const twin = new CreateTwin();
export default twin;

HelloWorld.vue组件中获取twin对象，加载gltf模型。

<script setup>
import twin from './twin';
twin.loader.load('./收费站.glb',function(gltf){
    twin.scene.add(gltf.scene);
})
</script>