直接上代码（我这用的vue3）
创建画布、相机、场景、灯光（此处以环境光为例）
<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>
2.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();
});
3.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();
});
4.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);
// 将模型添加到场景中
}
5.仅使用remove函数只是移除场景中的对象，并没有释放几何体和内存占用所以需要使用dispose释放占用内存

scene.traverse((v) => {
if (v.type === ‘Mesh’) {
v.geometry.dispose(); // 释放几何体占用的内存
v.material.dispose(); // 释放材质占用的内存
scene.remove(v); // 从场景中移除网格对象
}
});
文章知识点与官方知识档案匹配，可进一步学习相关知识