vue3使用three.js

现在vue3的项目中，大部分是vite vue3 typescript pinia的技术栈

vue3项目中安装three.js

pnpm i @types/three three

注意：在package.json中查看他们的版本，如果版本不一致的话，可能导致ts不能识别three这个模块

导入three模块

1.  
   import * as THREE from "three";
2.  
    
3.  
   import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
4.  
   import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

一些three的插件在examples/jsm的目录下

使用模型文件

在vite项目下，静态资源放在public目录下，特别是经过压缩过的glb模型文件，要使用three的draco去解码，

在官方的例子里，一些代码放在跟例子一个js目录里，安装的three.js里没有自带，所有需要复制到public里调用。

 使用类创建three

1.  
   const three = reactive<{ base3d?: Base3D }>({});
2.  
    
3.  
   onMounted(async () => {
4.  
   three.base3d = new Base3D("#my_parking", 45, 0.1, 500);
5.  
   });

onMounted中才能获取DOM结点

附上一份自己封装的three类，方便快速创建实例

1.  
   import * as THREE from "three";
2.  
   import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
3.  
   import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
4.  
   import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
5.  
   import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
6.  
   class Base3D {
7.  
   container: Element | null;
8.  
   camera: THREE.PerspectiveCamera;
9.  
   scene: THREE.Scene;
10.  
    renderer: THREE.WebGLRenderer;
11.  
    controls: OrbitControls;
12.  
    animate?: () => void;
13.  
    //构造函数
14.  
    constructor(selector: string,fov=70,near=0.1,far=200) {
15.  
    this.scene = new THREE.Scene();
16.  
    this.camera = new THREE.PerspectiveCamera(
17.  
    fov,
18.  
    window.innerWidth / window.innerHeight,
19.  
    near, //最近能看到的距离
20.  
    far
21.  
    );
22.  
    this.camera.updateProjectionMatrix();
23.  
    // this.camera.position.set(1, 1, 1);
24.  
    this.scene.add(this.camera);
25.  
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
26.  
    this.renderer.setPixelRatio(window.devicePixelRatio);
27.  
    this.renderer.outputEncoding = THREE.sRGBEncoding;
28.  
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
29.  
    this.renderer.toneMappingExposure = 0.85;
30.  
    this.renderer.setSize(window.innerWidth, window.innerHeight);
31.  
    this.renderer.setAnimationLoop(this.render.bind(this));
32.  
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
33.  
    //设置阻尼效果
34.  
    this.controls.enableDamping = true;
35.  
    //监听屏幕大小改变，修改渲染器的宽高，相机的比例
36.  
    window.addEventListener("resize", () => {
37.  
    this.camera.aspect = window.innerWidth / window.innerHeight;
38.  
    this.camera.updateProjectionMatrix();
39.  
    //设置渲染器宽高
40.  
    this.renderer.setSize(window.innerWidth, window.innerHeight);
41.  
    });
42.  
    this.container = document.querySelector(selector);
43.  
    if (!this.container) return;
44.  
    this.container?.appendChild(this.renderer.domElement);
45.  
    }
46.  
    setSceneBg() {
47.  
    this.scene.background = new THREE.Color(0x444444);
48.  
    // this.scene.environment = new RGBELoader().load(
49.  
    // "textures/equirectangular/venice_sunset_1k.hdr"
50.  
    // );
51.  
    // this.scene.environment &&
52.  
    // (this.scene.environment.mapping = THREE.EquirectangularReflectionMapping);
53.  
    }
54.  
    render() {
55.  
    //添加动画
56.  
    this.animate && this.animate();
57.  
    this.controls.update();
58.  
    this.renderer.render(this.scene, this.camera);
59.  
    }
60.  
    add(...object: THREE.Object3D<THREE.Event>[]) {
61.  
    this.scene.add(...object);
62.  
    }
63.  
    loadGLTF(name: string) {
64.  
    const dracoLoader = new DRACOLoader();
65.  
    dracoLoader.setDecoderPath("js/libs/draco/gltf/");
66.  
    const loader = new GLTFLoader();
67.  
    loader.setDRACOLoader(dracoLoader);
68.  
    return new Promise((relove, reject) => {
69.  
    loader.setPath("object/").load(
70.  
    name,
71.  
    (gltf) => {
72.  
    this.add(gltf.scene);
73.  
    relove("");
74.  
    },
75.  
    undefined,
76.  
    () => {
77.  
    reject("错误！");
78.  
    }
79.  
    );
80.  
    });
81.  
    }
82.  
    }
83.  
     
84.  
    export default Base3D;

这篇好文章是转载于：学新通技术网