简介

Three.js，一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。

安装

首先需要将Three安装到我们的项目中 npm install three，Three.js文件资源目录介绍如下

three-文件包
└───build——Three.js相关库，可以引入至.html文件。
    │
└───examples——包含了一些额外的示例和实用工具。
    │───jsm——Three.js各种功能扩展库。
        │───loaders───包含Three.js加载各种格式的模型的工具类。
└───src——Three.js引擎的源码。
    │

完整步骤

创建画布、相机、场景、灯光（此处以环境光为例）

<template>
    //创建画布
    <div class="canvas-container">
        <canvas id="web3d" style="width: 100%;height: 100%;"></canvas>
    </div>
</template>
<script setup>
    import { onMounted, ref } from 'vue';
    import * as THREE from 'three';
    //通过THREE对象访问Three.js库中的所有功能、类和方法。
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
    //OrbitControls是Three.js中的控制器
    const scene = new THREE.Scene()
    const canvas = ref()
    const renderer = ref()
    const camera = ref()
    onMounted(()=>{
        canvas.value = document.getElementById("web3d");
        //获取画布元素
        renderer.value = new THREE.WebGLRenderer({ canvas: canvas.value});
        //将画布元素交给WebGLRenderer渲染器
        camera.value = new THREE.PerspectiveCamera(75, 500 / 400);
        //创建一个透视相机参数为（视野角度、宽高比、近裁剪面距离和远裁剪面距离）
        scene.add(new THREE.AmbientLight(0xffffff, 5))
        //场景添加一个环境光
        renderer.value.render(scene, camera.value);
        //WebGLRenderer渲染器绘制场景和相机
        const controls = new OrbitControls(camera.value, renderer.value.domElement);
        //添加交互控制器
    })
</script>

gltf、glb格式文件加载

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
const gltfLoader = new GLTFLoader
const url = xxxx.glb || xxx.gltf
// 使用 GLTFLoader 加载模型文件
gltfLoader.load(url, (result) => {
  const model = result.scene;
  scene.add(model);
  // 将模型添加到场景中
  const mixer = new THREE.AnimationMixer(model);
  // 创建 AnimationMixer 对象，用于管理模型的动画
  function animate() {
        requestAnimationFrame(animate);
        // 更新动画
        if(mixer){
            mixer.update(0.01);
        }
        renderer.value.render(scene, camera.value);
        // 重新渲染
    }
    animate();
});

fbx格式文件加载

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
const fbxLoader = new FBXLoader
const url = xxxx.fbx
// 使用 GLTFLoader 加载模型文件
fbxLoader.load(url, (result) => {
  const model = result;
  scene.add(model);
  // 将模型添加到场景中
  const mixer = new THREE.AnimationMixer(model);
  // 创建 AnimationMixer 对象，用于管理模型的动画
  function animate() {
        requestAnimationFrame(animate);
        // 更新动画
        if(mixer){
            mixer.update(0.01);
        }
        renderer.value.render(scene, camera.value);
        // 重新渲染
    }
    animate();
});

obj格式文件加载

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
const objLoader = new OBJLoader(); 
const url = xxxx.obj
objLoader.load( url, (result) => {
    const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
    // 设置模型的材质 
    result.traverse((child) => {
        if (child instanceof THREE.Mesh) {
            child.material = material;
        }
    }); 
    scene.add(result);
    // 将模型添加到场景中 
}

仅使用remove函数只是移除场景中的对象，并没有释放几何体和内存占用所以需要使用dispose释放占用内存。

scene.traverse((v) => {
    if (v.type === 'Mesh') {
        v.geometry.dispose(); // 释放几何体占用的内存 
        v.material.dispose(); // 释放材质占用的内存 
        scene.remove(v); // 从场景中移除网格对象 
     } 
});

Three.js 常用格式加载（obj、gltf、fbx、glb）

简介

安装

完整步骤